LayaAir textInput 单行输入&多行输入

朱雀 2022-04-05 06:44 583阅读 0赞

**目录**

textInput 组件

编码示例

--------------------

# textInput 组件 #

文本输入框是游戏中经常会用到的一个 UI 组件，任何时候需要输入的时候都要使用到 laya.ui.textInput 类。

<table> 
 <tbody> 
  <tr> 
   <td style="width:160px;"><strong>Package</strong></td> 
   <td style="width:689px;">laya.ui</td> 
  </tr> 
  <tr> 
   <td style="width:160px;"><strong>类</strong></td> 
   <td style="width:689px;">public class TextInput</td> 
  </tr> 
  <tr> 
   <td style="width:160px;"><strong>Inheritance</strong></td> 
   <td style="width:689px;">TextInput <img alt="Inheritance" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9sYXlhYWlyLmxkYy5sYXlhYm94LmNvbS9hcGkvaW1hZ2VzL2luaGVyaXQtYXJyb3cuZ2lm">Label <img alt="Inheritance" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9sYXlhYWlyLmxkYy5sYXlhYm94LmNvbS9hcGkvaW1hZ2VzL2luaGVyaXQtYXJyb3cuZ2lm">Component <img alt="Inheritance" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9sYXlhYWlyLmxkYy5sYXlhYm94LmNvbS9hcGkvaW1hZ2VzL2luaGVyaXQtYXJyb3cuZ2lm">Sprite <img alt="Inheritance" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9sYXlhYWlyLmxkYy5sYXlhYm94LmNvbS9hcGkvaW1hZ2VzL2luaGVyaXQtYXJyb3cuZ2lm">Node <img alt="Inheritance" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9sYXlhYWlyLmxkYy5sYXlhYm94LmNvbS9hcGkvaW1hZ2VzL2luaGVyaXQtYXJyb3cuZ2lm">EventDispatcher <img alt="Inheritance" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9sYXlhYWlyLmxkYy5sYXlhYm94LmNvbS9hcGkvaW1hZ2VzL2luaGVyaXQtYXJyb3cuZ2lm"> Object</td> 
  </tr> 
  <tr> 
   <td style="width:160px;"><strong>子类</strong></td> 
   <td style="width:689px;">TextArea</td> 
  </tr> 
 </tbody> 
</table>

**`TextInput`**类用于创建显示对象以显示和输入文本，常用 API 如下：

<table> 
 <tbody> 
  <tr> 
   <th>Property</th> 
   <th>Defined By</th> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.TextInput#editable" rel="nofollow">editable</a> : Boolean&nbsp; &nbsp; &nbsp;设置可编辑状态。</td> 
   <td>TextInput</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.TextInput#focus" rel="nofollow">focus</a> : Boolean&nbsp; &nbsp; &nbsp;表示焦点是否在此实例上。true 表示组件获得焦点，默认为 false。</td> 
   <td>TextInput</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.TextInput#height" rel="nofollow">height</a> : Number&nbsp; &nbsp; &nbsp;[override] 表示显示对象的高度，以像素为单位。 注：当值为0时，高度为自适应大小。</td> 
   <td>TextInput</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.TextInput#inputElementXAdjuster" rel="nofollow">inputElementXAdjuster</a> : int&nbsp; &nbsp; &nbsp;设置原生input输入框的x坐标偏移。</td> 
   <td>TextInput</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.TextInput#inputElementYAdjuster" rel="nofollow">inputElementYAdjuster</a> : int&nbsp; &nbsp; &nbsp;设置原生input输入框的y坐标偏移。</td> 
   <td>TextInput</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.TextInput#maxChars" rel="nofollow">maxChars</a> : int <p>字符数量限制，默认为10000。 设置字符数量限制时，小于等于0的值将会限制字符数量为10000。</p> </td> 
   <td>TextInput</td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.TextInput#multiline" rel="nofollow">multiline</a> : Boolean&nbsp; &nbsp; &nbsp;<span style="color:#f33b45;">指示当前是否是文本域。 值为true表示当前是文本域，否则不是文本域。</span></p> <p><span style="color:#f33b45;">文本域即 Text ，可以理解为 Html 中的 textArea</span></p> </td> 
   <td>TextInput</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.TextInput#prompt" rel="nofollow">prompt</a> : String&nbsp; &nbsp; &nbsp;设置输入提示符。</td> 
   <td>TextInput</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.TextInput#promptColor" rel="nofollow">promptColor</a> : String&nbsp; &nbsp; &nbsp;设置输入提示符颜色。</td> 
   <td>TextInput</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.TextInput#restrict" rel="nofollow">restrict</a> : String&nbsp; &nbsp; &nbsp;限制输入的字符。</td> 
   <td>TextInput</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.TextInput#sizeGrid" rel="nofollow">sizeGrid</a> : String <p>当前实例的背景图（ AutoBitmap ）实例的有效缩放网格数据。 数据格式："上边距,右边距,下边距,左边距,是否重复填充(值为0：不重复填充，1：重复填充)"，以逗号分隔。 例如："4,4,4,4,1"</p> </td> 
   <td>TextInput</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.TextInput#skin" rel="nofollow">skin</a> : String <p>对象的皮肤地址，以字符串表示。 如果资源未加载，则先加载资源，加载完成后应用于此对象。 注意：资源加载完成后，会自动缓存至资源库中。</p> </td> 
   <td>TextInput</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.TextInput#text" rel="nofollow">text</a> : String&nbsp; &nbsp; &nbsp;[override] 当前文本内容字符串。</td> 
   <td>TextInput</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.TextInput#type" rel="nofollow">type</a> : String <p>输入框类型为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。</p> </td> 
   <td>TextInput</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.TextInput#width" rel="nofollow">width</a> : Number&nbsp; &nbsp; &nbsp;[override] 表示显示对象的宽度，以像素为单位。 注：当值为0时，宽度为自适应大小。</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <th colspan="1">Method</th> 
   <th>Defined By</th> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.TextInput#TextInput%28%29" rel="nofollow">TextInput</a>(text:String)&nbsp; &nbsp; &nbsp; 创建一个新的 TextInput 类实例。</p> </td> 
   <td>TextInput</td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.TextInput#destroy%28%29" rel="nofollow">destroy</a>(destroyChild:Boolean = true):void</p> <p>[override] 销毁此对象。destroy对象默认会把自己从父节点移除，并且清理自身引用关系，等待js自动垃圾回收机制回收。destroy后不能再使用。 destroy时会移除自身的事情监听，自身的timer监听，移除子对象及从父节点移除自己。</p> </td> 
   <td>TextInput</td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.TextInput#select%28%29" rel="nofollow">select</a>():void&nbsp; &nbsp; &nbsp; 选中输入框内的文本。</p> </td> 
   <td>TextInput</td> 
  </tr> 
 </tbody> 
</table>

更多 API 请参考官网 API 地址：[https://layaair.ldc.layabox.com/api/?category=UI&class=laya.ui.TextInput][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();

![20181211142340491.gif][]

可参考官网示例：

[https://layaair.ldc.layabox.com/demo/?category=2d&group=Text&name=InputSingleline][https_layaair.ldc.layabox.com_demo_category_2d_group_Text_name_InputSingleline]

[https://layaair.ldc.layabox.com/demo/?category=2d&group=Text&name=InputMultiline][https_layaair.ldc.layabox.com_demo_category_2d_group_Text_name_InputMultiline]

[https_layaair.ldc.layabox.com_api_category_UI_class_laya.ui.TextInput]: https://layaair.ldc.layabox.com/api/?category=UI&class=laya.ui.TextInput
[20181211142340491.gif]: /images/20220405/52ba8c6c1bcc40c69a7291ce8ef0c8c7.png
[https_layaair.ldc.layabox.com_demo_category_2d_group_Text_name_InputSingleline]: https://layaair.ldc.layabox.com/demo/?category=2d&group=Text&name=InputSingleline
[https_layaair.ldc.layabox.com_demo_category_2d_group_Text_name_InputMultiline]: https://layaair.ldc.layabox.com/demo/?category=2d&group=Text&name=InputMultiline