1# 文本输入 (TextInput/TextArea) 2 3 4TextInput、TextArea是输入框组件，通常用于响应用户的输入操作，比如评论区的输入、聊天框的输入、表格的输入等，也可以结合其它组件构建功能页面，例如登录注册页面。具体用法请参考[TextInput](../reference/apis-arkui/arkui-ts/ts-basic-components-textinput.md)、[TextArea](../reference/apis-arkui/arkui-ts/ts-basic-components-textarea.md)。 5 6 7## 创建输入框 8 9TextInput为单行输入框、TextArea为多行输入框。通过以下接口来创建。 10 11```ts 12TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextInputController}) 13``` 14 15```ts 16TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextAreaController}) 17``` 18 19- 单行输入框 20 21 ```ts 22 TextInput() 23 ``` 24 25  26 27 28- 多行输入框 29 30 ```ts 31 TextArea() 32 ``` 33 34  35 36 多行输入框文字超出一行时会自动折行。 37 38 39 ```ts 40 TextArea({text:"我是TextArea我是TextArea我是TextArea我是TextArea"}).width(300) 41 ``` 42 43  44 45 46## 设置输入框类型 47 48TextInput有9种可选类型，分别为Normal基本输入模式、Password密码输入模式、Email邮箱地址输入模式、Number纯数字输入模式、PhoneNumber电话号码输入模式、USER_NAME用户名输入模式、NEW_PASSWORD新密码输入模式、NUMBER_PASSWORD纯数字密码输入模式、SCREEN_LOCK_PASSWORD锁屏应用密码输入模式、NUMBER_DECIMAL带小数点的数字输入模式。通过type属性进行设置： 49 50 51- 基本输入模式（默认类型） 52 53 ```ts 54 TextInput() 55 .type(InputType.Normal) 56 ``` 57 58  59 60- 密码输入模式 61 62 ```ts 63 TextInput() 64 .type(InputType.Password) 65 ``` 66 67  68 69 70## 自定义样式 71 72- 设置无输入时的提示文本。 73 TextInput({placeholder:'我是提示文本'}) 74 75 76 ```ts 77 TextInput({placeholder:'我是提示文本'}) 78 ``` 79 80  81 82 83- 设置输入框当前的文本内容。 84 85 ```ts 86 TextInput({placeholder:'我是提示文本',text:'我是当前文本内容'}) 87 ``` 88 89  90 91- 添加backgroundColor改变输入框的背景颜色。 92 93 ```ts 94 TextInput({placeholder:'我是提示文本',text:'我是当前文本内容'}) 95 .backgroundColor(Color.Pink) 96 ``` 97 98  99 100 更丰富的样式可以结合[通用属性](../reference/apis-arkui/arkui-ts/ts-universal-attributes-size.md)实现。 101 102 103## 添加事件 104 105文本框主要用于获取用户输入的信息，把信息处理成数据进行上传，绑定onChange事件可以获取输入框内改变的内容。用户也可以使用通用事件来进行相应的交互操作。 106 107 108 109```ts 110TextInput() 111 .onChange((value: string) => { 112 console.info(value); 113 }) 114 .onFocus(() => { 115 console.info('获取焦点'); 116 }) 117``` 118 119 120## 场景示例 121 122在登录/注册页面，用户进行登录或注册。 123 124```ts 125@Entry 126@Component 127struct TextInputSample { 128 build() { 129 Column() { 130 TextInput({ placeholder: 'input your username' }).margin({ top: 20 }) 131 .onSubmit((EnterKeyType)=>{ 132 console.info(EnterKeyType+'输入法回车键的类型值') 133 }) 134 TextInput({ placeholder: 'input your password' }).type(InputType.Password).margin({ top: 20 }) 135 .onSubmit((EnterKeyType)=>{ 136 console.info(EnterKeyType+'输入法回车键的类型值') 137 }) 138 Button('Sign in').width(150).margin({ top: 20 }) 139 }.padding(20) 140 } 141} 142``` 143 144 145 146 147 148## 相关实例 149 150针对文本输入开发，有以下相关实例可供参考： 151 152- [简易计算器（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/SimpleCalculator)
