LayaAir textInput 單行輸入&多行輸入
目錄
textInput 元件
文字輸入框是遊戲中經常會用到的一個 UI 元件,任何時候需要輸入的時候都要使用到 laya.ui.textInput 類。
Package | laya.ui |
類 | public class TextInput |
Inheritance | TextInput Label Component Sprite Node EventDispatcher Object |
子類 | TextArea |
TextInput
類用於建立顯示物件以顯示和輸入文字,常用 API 如下:
Property | Defined By |
---|---|
editable : Boolean 設定可編輯狀態。 | TextInput |
focus : Boolean 表示焦點是否在此例項上。true 表示元件獲得焦點,預設為 false。 | TextInput |
height : Number [override] 表示顯示物件的高度,以畫素為單位。 注:當值為0時,高度為自適應大小。 | TextInput |
inputElementXAdjuster : int 設定原生input輸入框的x座標偏移。 | TextInput |
inputElementYAdjuster : int 設定原生input輸入框的y座標偏移。 | TextInput |
maxChars : int 字元數量限制,預設為10000。 設定字元數量限制時,小於等於0的值將會限制字元數量為10000。 |
TextInput |
文字域即 Text ,可以理解為 Html 中的 textArea |
TextInput |
prompt : String 設定輸入提示符。 | TextInput |
promptColor : String 設定輸入提示符顏色。 | TextInput |
restrict : String 限制輸入的字元。 | TextInput |
sizeGrid : String 當前例項的背景圖( AutoBitmap )例項的有效縮放網格資料。 資料格式:"上邊距,右邊距,下邊距,左邊距,是否重複填充(值為0:不重複填充,1:重複填充)",以逗號分隔。 例如:"4,4,4,4,1" |
TextInput |
skin : String 物件的面板地址,以字串表示。 如果資源未載入,則先載入資源,載入完成後應用於此物件。 注意:資源載入完成後,會自動快取至資源庫中。 |
TextInput |
text : String [override] 當前文字內容字串。 | TextInput |
type : String 輸入框型別為Input靜態常量之一。 TYPE_TEXT、TYPE_PASSWORD 、TYPE_EMAIL 、TYPE_URL、 TYPE_NUMBER、 TYPE_RANGE 、TYPE_DATE、 TYPE_MONTH、 TYPE_WEEK 、TYPE_TIME 、TYPE_DATE_TIME、 TYPE_DATE_TIME_LOCAL 平臺相容性參見http://www.w3school.com.cn/html5/html_5_form_input_types.asp。 |
TextInput |
width : Number [override] 表示顯示物件的寬度,以畫素為單位。 注:當值為0時,寬度為自適應大小。 |
Method | Defined By |
---|---|
TextInput(text:String) 建立一個新的 TextInput 類例項。 |
TextInput |
destroy(destroyChild:Boolean = true):void [override] 銷燬此物件。destroy物件預設會把自己從父節點移除,並且清理自身引用關係,等待js自動垃圾回收機制回收。destroy後不能再使用。 destroy時會移除自身的事情監聽,自身的timer監聽,移除子物件及從父節點移除自己。 |
TextInput |
select():void 選中輸入框內的文字。 |
TextInput |
更多 API 請參考官網 API 地址:https://layaair.ldc.layabox.com/api/?category=UI&class=laya.ui.TextInput
編碼示例
LayaAir 引擎版本為 2.0.0beat5 版本。
//單行文字輸入框
let text_singleLineInput = function(){
//建立文字輸入框物件
//構造器中的內容會直接顯示在元件中當做實際內容,而並非提示內容
let textInput = new Laya.TextInput("住址:");
//wordWrap 表示文字是否自動換行,預設為false。 若值為true,則自動換行;否則不自動換行
textInput.wordWrap = true;//此屬性繼承自父類 Label
//width:[override] 表示顯示物件的寬度,以畫素為單位。 注:當值為0時,寬度為自適應大小。
//height:[override] 表示顯示物件的高度,以畫素為單位。 注:當值為0時,高度為自適應大小。
textInput.width = 300;
textInput.height = 100;
//設定元件顯示的座標位置,相當於分別設定x和y屬性,繼承自父類 Sprite
textInput.pos(10,10);
//文字背景顏色,以字串表示。 繼承自父類 Label
textInput.bgColor = "#007ACC";
//指定文字的字型大小(以畫素為單位)。 預設為20畫素,可以通過 Text.defaultSize 設定預設大小。
//繼承自父類 Label
textInput.fontSize = 22;
//設定輸入框預設獲得焦點
textInput.focus = true;
Laya.stage.addChild(textInput);
};
//多行文字輸入框
let text_multiLineInput = function(){
let textInput = new Laya.TextInput();
textInput.fontSize = 22;
textInput.bgColor = "#007ACC";
textInput.width = 200;
textInput.height = 100;
textInput.x = 10;
textInput.y = 120;
textInput.wordWrap = true;
//multiline:true 表示當前是文字域,支援多行輸入
textInput.multiline = true;
//限制輸入的最大字數為 50,超過時不再顯示
textInput.maxChars = 50;
//輸入框提示符,相當於 Html 的 placeholder 屬性,當用戶實際輸入時,提示字元會消失
textInput.prompt = "教育經歷...";
Laya.stage.addChild(textInput);
};
//密碼框
let text_passwordInput = function(){
let textInput = new Laya.TextInput();
textInput.width = 300;
textInput.height = 100;
textInput.pos(10,250);
textInput.bgColor = "#007ACC";
textInput.fontSize = 22;
textInput.prompt = "密碼";
//設定文字輸入框型別為 密碼框,密碼框內容不可見,laya.display.Input 中提供了各種型別
textInput.type = Laya.Input.TYPE_PASSWORD;
Laya.stage.addChild(textInput);
}
//初始化引擎,指定舞臺場景大小,瀏覽器如果不支援 WebGL ,則會自動切換為 Canvas
Laya.init(360,640,Laya.WebGL);
//設定舞臺背景顏色
Laya.stage.bgColor = "#474749";
text_singleLineInput();
text_multiLineInput();
text_passwordInput();
可參考官網示例:
https://layaair.ldc.layabox.com/demo/?category=2d&group=Text&name=InputSingleline
https://layaair.ldc.layabox.com/demo/?category=2d&group=Text&name=InputMultiline