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