输入框 - Input
# 输入框控件: input
输入框控件也是一个特殊的文本控件，因此所有文本控件的函数的属性和函数都适用于按钮控件。输入框控件有自己的属性和函数，要查看所有这些内容，阅读EditText。
对于一个输入框控件，我们可以通过text属性设置他的内容，通过lines属性指定输入框的行数；在代码中通过getText()函数获取输入的内容。例如：
```xml
"ui";
ui.layout(
<vertical padding="16">
<text textSize="16sp" textColor="black" text="请输入姓名"/>
<input id="name" text="小明"/>
<button id="ok" text="确定"/>
</vertical>
);
//指定确定按钮点击时要执行的动作
ui.ok.click(function(){
//通过getText()获取输入的内容
var name = ui.name.getText();
toast(name + "您好!");
});
```
除此之外，输入框控件有另外一些主要属性(虽然这些属性对于文本控件也是可用的但一般只用于输入框控件)：
## hint
输入提示。这个提示会在输入框为空的时候显示出来。
上面图片效果的代码为：
```xml
"ui";
ui.layout(
<vertical>
<input hint="请输入姓名"/>
</vertical>
)
```
## textColorHint
指定输入提示的字体颜色。
## textSizeHint
指定输入提示的字体大小。
## inputType
指定输入框可以输入的文本类型。可选的值为以下值及其用"|"的组合:
- date 用于输入日期。
- datetime 用于输入日期和时间。
- none 没有内容类型。此输入框不可编辑。
- number 仅可输入数字。
- numberDecimal 可以与number和它的其他选项组合，以允许输入十进制数(包括小数)。
- numberPassword 仅可输入数字密码。
- numberSigned 可以与number和它的其他选项组合，以允许输入有符号的数。
- phone 用于输入一个电话号码。
- text 只是普通文本。
- textAutoComplete 可以与text和它的其他选项结合, 以指定此字段将做自己的自动完成, 并适当地与输入法交互。
- textAutoCorrect 可以与text和它的其他选项结合, 以请求自动文本输入纠错。
- textCapCharacters 可以与text和它的其他选项结合, 以请求大写所有字符。
- textCapSentences 可以与text和它的其他选项结合, 以请求大写每个句子里面的第一个字符。
- textCapWords 可以与text和它的其他选项结合, 以请求大写每个单词里面的第一个字符。
- textEmailAddress 用于输入一个电子邮件地址。
- textEmailSubject 用于输入电子邮件的主题。
- textImeMultiLine 可以与text和它的其他选项结合，以指示虽然常规文本视图不应为多行, 但如果可以, 则IME应提供多行支持。
- textLongMessage 用于输入长消息的内容。
- textMultiLine 可以与text和它的其他选项结合, 以便在该字段中允许多行文本。如果未设置此标志, 则文本字段将被限制为单行。
- textNoSuggestions 可以与text及它的其他选项结合, 以指示输入法不应显示任何基于字典的单词建议。
- textPassword 用于输入密码。
- textPersonName 用于输入人名。
- textPhonetic 用于输入拼音发音的文本, 如联系人条目中的拼音名称字段。
- textPostalAddress 用于输入邮寄地址。
- textShortMessage 用于输入短的消息内容。
- textUri 用于输入一个URI。
- textVisiblePassword 用于输入可见的密码。
- textWebEditText 用于输入在web表单中的文本。
- textWebEmailAddress 用于在web表单里输入一个电子邮件地址。
- textWebPassword 用于在web表单里输入一个密码。
- time 用于输入时间。
例如，想指定一个输入框的输入类型为小数数字，为:
```html
<input inputType="number|numberDecimal"/>
```
## password
指定输入框输入框是否为密码输入框。默认为false。
```html
例如：<input password="true"/>
```
## numeric
指定输入框输入框是否为数字输入框。默认为false。
```html
例如：<input numeric="true"/>
```
## phoneNumber
指定输入框输入框是否为电话号码输入框。默认为false。
```
例如：<input phoneNumber="true"/>
```
## digits
指定输入框可以输入的字符。例如，要指定输入框只能输入"1234567890+-"，为
```
<input digits="1234567890+-"/>。
```
## singleLine
指定输入框是否为单行输入框。默认为false。您也可以通过lines="1"来指定单行输入框。
```html
例如：<input singleLine="true"/>
```
### 监听输入框内容改变：
```js
"ui";
ui.layout(
<vertical padding="16">
<input id="abc" w="*" />
</vertical>
);
ui.abc.addTextChangedListener({
afterTextChanged:(string) => {
toast(string)
}
})
```
## APP自带例子
```js
"ui";
ui.layout(
<vertical padding="16">
<text text="输入框" textColor="black" textSize="16sp" marginTop="16"/>
<input />
<!-- hint属性用来设置输入框的提示-->
<text text="带提示的输入框" textColor="black" textSize="16sp" marginTop="16"/>
<input hint="请输入一些内容"/>
<!-- inputType属性用来设置输入类型，包括number, email, phone等-->
<text text="数字输入框" textColor="black" textSize="16sp" marginTop="16"/>
<input inputType="number" text="123"/>
<!-- password属性用来设置输入框是否是密码输入框 -->
<text text="密码输入框" textColor="black" textSize="16sp" marginTop="16"/>
<input password="true"/>
<!-- lines属性用来设置输入框的行数 -->
<text text="多行输入框" textColor="black" textSize="16sp" marginTop="16"/>
<input lines="3"/>
<text text="设置输入框错误信息" textColor="black" textSize="16sp" marginTop="16"/>
<input id="qq" inputType="number" hint="请输入您的QQ号码"/>
<button id="ok" text="确定" w="auto" style="Widget.AppCompat.Button.Colored"/>
</vertical>
);
ui.ok.click(()=>{
var text = ui.qq.text();
if(text.length == 0){
ui.qq.setError("输入不能为空");
return;
}
var qq = parseInt(text);
if(qq < 10000){
ui.qq.setError("QQ号码格式错误");
return;
}
ui.qq.setError(null);
});
```