• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Text Input (TextInput/TextArea)
2
3
4The **TextInput** and **TextArea** components are input components typically used to accept input from the user, such as comments, chat messages, and table content. They can be used in combination with other components to meet more diversified purposes, for example, login and registration. For details, see [TextInput](../reference/apis-arkui/arkui-ts/ts-basic-components-textinput.md) and [TextArea](../reference/apis-arkui/arkui-ts/ts-basic-components-textarea.md).
5
6
7## Creating a Text Box
8
9The **TextInput** component provides single-line text input, while the **TextArea** component provides multi-line text input. To create these components, use the following APIs:
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- Single-line text box
20
21  ```ts
22  TextInput()
23  ```
24
25  ![en-us_image_0000001511580844](figures/en-us_image_0000001511580844.png)
26
27
28- Multi-line text box
29
30  ```ts
31  TextArea()
32  ```
33
34  ![en-us_image_0000001562940481](figures/en-us_image_0000001562940481.png)
35
36  The **TextArea** component automatically wraps text so that each line does not have more than the width of the component.
37
38
39  ```ts
40  TextArea({text:"I am TextArea I am TextArea I am TextArea"}).width(300)
41  ```
42
43  ![en-us_image_0000001511580836](figures/en-us_image_0000001511580836.png)
44
45
46## Setting the Input Box Type
47
48The **TextInput** component comes in nine types. You can specify its type by setting the **type** parameter to any of the following: **Normal**, **Password**, **Email**, **Number**, **PhoneNumber**, **USER_NAME**, **NEW_PASSWORD**, **NUMBER_PASSWORD**,<!--Del--> **SCREEN_LOCK_PASSWORD**,<!--DelEnd--> and **NUMBER_DECIMAL**.
49
50
51- Normal type (default type)
52
53  ```ts
54  TextInput()
55    .type(InputType.Normal)
56  ```
57
58  ![en-us_image_0000001562820765](figures/en-us_image_0000001562820765.png)
59
60- Password type
61
62  ```ts
63  TextInput()
64    .type(InputType.Password)
65  ```
66
67  ![en-us_image_0000001511580840](figures/en-us_image_0000001511580840.png)
68
69
70## Setting Styles
71
72- Set the placeholder text displayed when there is no input.
73  TextInput({placeholder:'I am placeholder text'})
74
75
76  ```ts
77  TextInput({placeholder:'I am placeholder text'})
78  ```
79
80  ![en-us_image_0000001511900400](figures/en-us_image_0000001511900400.png)
81
82
83- Set the current text input.
84
85  ```ts
86  TextInput({placeholder:'I am placeholder text',text:'I am current text input'})
87  ```
88
89  ![en-us_image_0000001562820761](figures/en-us_image_0000001562820761.png)
90
91- Use **backgroundColor** to set the background color of the text box.
92
93  ```ts
94  TextInput({placeholder:'I am placeholder text',text:'I am current text input'})
95    .backgroundColor(Color.Pink)
96  ```
97
98  ![en-us_image_0000001511740444](figures/en-us_image_0000001511740444.png)
99
100  More styles can be implemented by leveraging the [universal attributes](../reference/apis-arkui/arkui-ts/ts-universal-attributes-size.md).
101
102
103## Adding Events
104
105You can add the **onChange** event for the text box to obtain its content changes. You can also add the universal events to implement user interactions.
106
107```ts
108TextInput()
109  .onChange((value: string) => {
110    console.info(value);
111  })
112  .onFocus(() => {
113    console.info ('Get Focus');
114  })
115```
116
117## Example Scenario
118
119In this example, the text box is used to submit forms on the user login or registration page.
120
121```ts
122@Entry
123@Component
124struct TextInputSample {
125  build() {
126    Column() {
127      TextInput({ placeholder: 'input your username' }).margin({ top: 20 })
128        .onSubmit((EnterKeyType)=>{
129          console.info(EnterKeyType+'Enter key type')
130        })
131      TextInput({ placeholder: 'input your password' }).type(InputType.Password).margin({ top: 20 })
132        .onSubmit((EnterKeyType)=>{
133          console.info(EnterKeyType+'Enter key type')
134        })
135      Button('Sign in').width(150).margin({ top: 20 })
136    }.padding(20)
137  }
138}
139```
140
141![textinput](figures/textinput.gif)
142
143## Keyboard Avoidance
144
145After the keyboard is raised, scrollable container components will only activate the keyboard avoidance feature when switching between landscape and portrait modes. To enable keyboard avoidance for non-scrollable container components, nest them within a scrollable container component, such as [Scroll](../reference/apis-arkui/arkui-ts/ts-container-scroll.md), [List](../reference/apis-arkui/arkui-ts/ts-container-list.md), or [Grid](../reference/apis-arkui/arkui-ts/ts-container-grid.md).
146
147```ts
148// xxx.ets
149@Entry
150@Component
151struct Index {
152  placeHolderArr: string[] = ['1', '2', '3', '4', '5', '6', '7']
153
154  build() {
155    Scroll() {
156      Column() {
157        ForEach(this.placeHolderArr, (placeholder: string) => {
158          TextInput({ placeholder: 'TextInput ' + placeholder })
159            .margin(30)
160        })
161      }
162    }
163    .height('100%')
164    .width('100%')
165  }
166}
167```
168
169![textinputkeyboardavoid](figures/TextInputKeyboardAvoid.gif)
170
171