1# TextInput 2 3The **\<TextInput>** component provides single-line text input. 4 5> **NOTE** 6> 7> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Child Components 11 12Not supported 13 14 15## APIs 16 17TextInput(value?: TextInputOptions) 18 19**Parameters** 20| Name|Type|Mandatory|Description| 21|-----|-----|----|----| 22| value | [TextInputOptions](#textinputoptions) | No | Parameters of the **\<TextInput>** component.| 23 24## TextInputOptions 25| Name | Type | Mandatory | Description | 26| ----------------------- | ---------------------------------------- | ---- | ---------------------------------------- | 27| placeholder | [ResourceStr](ts-types.md#resourcestr) | No | Text displayed when there is no input. | 28| text | [ResourceStr](ts-types.md#resourcestr) | No | Current text input.<br>If the component has [stateStyles](ts-universal-attributes-polymorphic-style.md) or any other attribute that may trigger updating configured, you are advised to bind the state variable to the text in real time through the **onChange** event,<br>so as to prevent display errors when the component is updated.<br>Since API version 10, this parameter supports two-way binding through [$$](../../quick-start/arkts-two-way-sync.md).| 29| controller<sup>8+</sup> | [TextInputController](#textinputcontroller8) | No | Text input controller. | 30 31## Attributes 32 33Among the [universal attributes](ts-universal-attributes-size.md) and [universal text attributes](ts-universal-attributes-text-style.md), **fontColor**, **fontSize**, **fontStyle**, **fontWeight**, and **fontFamily** are supported. In addition, the following attributes are supported. 34 35| Name | Type | Description | 36| ------------------------------------- | ---------------------------------------- | ---------------------------------------- | 37| type | [InputType](#inputtype) | Text box type.<br>Default value: **InputType.Normal** | 38| placeholderColor | [ResourceColor](ts-types.md#resourcecolor) | Placeholder text color.<br>The default value follows the theme. | 39| placeholderFont | [Font](ts-types.md#font) | Placeholder text font. | 40| enterKeyType | [EnterKeyType](#enterkeytype) | Type of the Enter key.<br>Default value: **EnterKeyType.Done** | 41| caretColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the caret in the text box.<br>Default value: **'#007DFF'** | 42| maxLength | number | Maximum number of characters in the text input. | 43| inputFilter<sup>8+</sup> | {<br>value: [ResourceStr](ts-types.md#resourcestr),<br>error?: (value: string) => void<br>} | Regular expression for input filtering. Only inputs that comply with the regular expression can be displayed. Other inputs are filtered out. The regular expression can match single characters, but not strings.<br>- **value**: regular expression to set.<br>- **error**: filtered-out content to return when regular expression matching fails.<br>Since API version 11, setting **inputFilter** will invalidate the text filtering effect brought by setting the **type** attribute.| 44| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9) | Whether copy and paste is allowed.<br>Default value: **CopyOptions.LocalDevice**<br>If this attribute is set to **CopyOptions.None**, the paste operation is allowed, but not the copy or cut operation.<br>**NOTE**<br>For dragging, **copyOption** only restricts whether text is selected and does not involve the dragging scope.| 45| showPasswordIcon<sup>9+</sup> | boolean | Whether to display the password icon at the end of the password text box.<br>Default value: **true** | 46| style<sup>9+</sup> | [TextInputStyle](#textinputstyle9) \| [TextContentStyle](ts-appendix-enums.md#textcontentstyle10) | Text input style. For the inline input style, only **InputType.Normal** is supported.<br>Default value: **TextInputStyle.Default**| 47| textAlign<sup>9+</sup> | [TextAlign](ts-appendix-enums.md#textalign) | Horizontal alignment of the text.<br>Default value: **TextAlign.Start**<br>**NOTE**<br>Available options are **TextAlign.Start**, **TextAlign.Center**, and **TextAlign.End**.<br>To set vertical alignment for the text, use the [align](ts-universal-attributes-location.md) attribute. The **align** attribute alone does not control the horizontal position of the text. In other words, **Alignment.TopStart**, **Alignment.Top**, and **Alignment.TopEnd** produce the same effect, top-aligning the text; **Alignment.Start**, **Alignment.Center**, and **Alignment.End** produce the same effect, centered-aligning the text vertically; **Alignment.BottomStart**, **Alignment.Bottom**, and **Alignment.BottomEnd** produce the same effect, bottom-aligning the text.| 48| selectedBackgroundColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | Background color of the selected text.<br>If the opacity is not set, a 20% opacity will be used. | 49| caretStyle<sup>10+</sup> | [CaretStyle](#caretstyle10) | Caret style. | 50| caretPosition<sup>10+</sup> | number | Caret position. | 51| showUnit<sup>10+</sup> | [CustomBuilder](ts-types.md#custombuilder8) | Unit for content in the component.<br>By default, there is no unit.<br>This attribute must be used together with **showUnderline**. It is effective only when **showUnderline** is set to **true**.| 52| showError<sup>10+</sup> | string \| undefined | Error message displayed when an error occurs.<br>By default, no error message is displayed.<br>**NOTE**<br>If the parameter type is string and the input content does not comply with specifications, the error message is displayed. If the parameter type is undefined, no error message is displayed. See [Example 2](#example-2).| 53| showUnderline<sup>10+</sup> | boolean | Whether to show an underline. By default, the underline comes in the color of **'#33182431'**, thickness of 1 px, and text box size of 48 vp. The underline supports only the **InputType.Normal** type.<br>Default value: **false**| 54| passwordIcon<sup>10+</sup> | [PasswordIcon](#passwordicon10) | Password icon to display at the end of the password text box.<br>By default, the system-provided icon is used. | 55| enableKeyboardOnFocus<sup>10+</sup> | boolean | Whether to enable the input method when the component obtains focus in a way other than clicking.<br>Default value: **true** | 56| selectionMenuHidden<sup>10+</sup> | boolean | Whether to display the text selection menu when the text box is long-pressed or right-clicked.<br>Default value: **false**| 57| barState<sup>10+</sup> | [BarState](ts-appendix-enums.md#barstate) | Scrollbar state when the inline input style is used.<br>Default value: **BarState.Auto**| 58| maxLines<sup>10+</sup> | number | Maximum number of lines that can be displayed when the inline input style is used.<br>Default value: **3**<br>**NOTE**<br>Value range: (0, +∞)| 59| customKeyboard<sup>10+</sup> | [CustomBuilder](ts-types.md#custombuilder8) | Custom keyboard.<br>**NOTE**<br>When a custom keyboard is set, activating the text box opens the specified custom component, instead of the system input method, and the **enterKeyType** attribute setting for the system keyboard will not take effect.<br>The custom keyboard's height can be set through the **height** attribute of the custom component's root node, and its width is fixed at the default value.<br>The custom keyboard is displayed on top of the current page, without compressing or raising the page.<br>The custom keyboard cannot obtain the focus, but it blocks gesture events.<br>By default, the custom keyboard is closed when the input component loses the focus. You can also use the [TextInputController](#textinputcontroller8).[stopEditing](#stopediting10) API to close the keyboard.<br>When a custom keyboard is set, the text box does not support camera input, even when the device supports.| 60| enableAutoFill<sup>11+<sup> | boolean | Whether to enable autofill. **true**: enable<br>**false**: disable<br> Default value: **true**| 61| passwordRules<sup>11+<sup> | string | Rules for generating passwords. | 62| cancelButton<sup>11+</sup> | {<br>style? : [CancelButtonStyle](ts-basic-components-search.md#cancelbuttonstyle10)<br>icon?: [IconOptions](ts-basic-components-search.md#iconoptions10) <br>} | Style of the Cancel button on the right.<br>Default value:<br>{<br>style: CancelButtonStyle.INPUT<br>}<br>The inline mode is not supported.| 63| selectAll<sup>11+</sup> | boolean | Whether to select all text in the initial state.<br>Default value: **false**<br>The inline mode is not supported.| 64| showCounter<sup>11+</sup> | value: boolean, options?: [InputCounterOptions](#inputcounteroptions11) | Counter settings. **options** can be set only when **value** is set to **true**, in which case a character counter is displayed below the text box. This attribute must be used together with **maxLength**. The character counter is displayed in this format: Number of characters that have been entered/Maximum number of characters allowed. It is visible when the number of characters that have been entered is greater than the maximum number of characters multiplied by the threshold percentage value. If **options** is not set, the text box border turns red when the number of entered characters reaches the maximum. If **value** is set to **true** and **options** is set, the text box border turns red and the text box shakes when the number of entered characters reaches the maximum, provided that the value of **thresholdPercentage** is valid. If **highlightBorder** is set to **false**, the text box border does not turn red. By default, **highlightBorder** is set to **true**. For the **\<TextInput>** component to show the border, configure it to show an underline. When the component is in inline or password input style, the counter is not displayed.| 65> **NOTE** 66> 67> The default value of the universal attribute [padding](ts-universal-attributes-size.md#padding) is as follows: 68> 69> {<br> top: 8 vp,<br> right: 16 vp,<br> bottom: 8 vp,<br> left: 16 vp<br> } 70> 71> Since API version 10, **.width('auto')** can be set for the **\<TextInput>** component. Under this setting, the component auto-adapts its width to the text width, while respecting the **constraintSize** configuration and the maximum and minimum width restrictions received by the parent container. For details, see [Size](ts-universal-attributes-size.md). 72 73## SubmitEvent<sup>11+</sup> 74 75Defines the user submission event. 76 77| Name | Type | Mandatory | Description | 78| ----------------- | ------------- | ---- | ---------------------------- | 79| keepEditableState | () => void | No | Editing status of the text box.<br> When this API is called, the text box remains in editing state.| 80| text | string | No | Text in the text box. | 81 82## CaretStyle<sup>10+</sup> 83| Name| Type | Mandatory| Description | 84| ------ | -------- | ---- | ------------------------------------------- | 85| width | [Length](ts-types.md#length) | No | Caret size. It cannot be set in percentage.| 86 87## EnterKeyType 88 89| Name | Description | 90| ---------------------- | --------- | 91| Go | The Enter key is labeled "Go." | 92| Search | The Enter key is labeled "Search." | 93| Send | The Enter key is labeled "Send." | 94| Next | The Enter key is labeled "Next."| 95| Done | The Enter key | 96| PREVIOUS<sup>11+</sup> | The Enter key is labeled "Previous."| 97| NEW_LINE<sup>11+</sup> | The Enter key is labeled "Return." | 98 99## InputType 100 101| Name | Description | 102| ---------------------------------- | ---------------------------------------- | 103| Normal | Normal input mode. In this mode, there is no special restriction on the input characters. | 104| Password | Password input mode. This mode accepts only digits, letters, underscores (_), spaces, and special characters. An eye icon is used to show or hide the password, and the password is hidden behind dots by default. The password input mode does not support underlines.| 105| Email | Email address input mode. This mode accepts only digits, letters, underscores (_), dots (.), and one at sign (@).| 106| Number | Digit input mode. | 107| PhoneNumber<sup>9+</sup> | Phone number input mode.<br>This mode accepts only digits, plus signs (+), hyphens (-), asterisks (*), and number signs (#). The length is not limited. | 108| USER_NAME<sup>11+<sup> | Username input mode. | 109| NEW_PASSWORD<sup>11+<sup> | New password input mode. | 110| NUMBER_PASSWORD<sup>11+</sup> | Numeric password input mode. An eye icon is used to show or hide the password, and the password is hidden behind dots by default. The password input mode does not support underlines.| 111| SCREEN_LOCK_PASSWORD<sup>11+</sup> | Lock screen password input mode. This mode accepts only digits, letters, underscores (_), spaces, and special characters. An eye icon is used to show or hide the password, and the password is hidden behind dots by default. The password input mode does not support underlines.<br>**System API**: This is a system API.| 112| NUMBER_DECIMAL<sup>11+</sup> | Number input mode with a decimal point. The value can contain digits and one decimal point. | 113 114## TextInputStyle<sup>9+</sup> 115 116| Name | Description | 117| ------- | ---------------------------------------- | 118| Default | Default style. The caret width is fixed at 1.5 vp, and the caret height is subject to the background height and font size of the selected text. | 119| Inline | Inline input style. The background height of the selected text is the same as the height of the text box.<br>This style is used in scenarios where editing and non-editing states are obvious, for example, renaming in the file list view.<br>The **showError** attribute is not supported for this style.| 120 121## PasswordIcon<sup>10+</sup> 122 123| Name | Type | Mandatory | Description | 124| ---------- | ---------------------------------------- | ---- | ------------------------- | 125| onIconSrc | string \| [Resource](ts-types.md#resource)| No | Icon that can be used to hide the password in password input mode.| 126| offIconSrc | string \| [Resource](ts-types.md#resource)| No | Icon that can be used to show the password in password input mode.| 127 128## Events 129 130In addition to the [universal events](ts-universal-events-click.md), the following events are supported. 131 132| Name | Description | 133| ---------------------------------------- | ---------------------------------------- | 134| onChange(callback: (value: string) => void) | Triggered when the input in the text box changes.<br>**value**: text content.<br>This event is triggered when any of the following conditions is met:<br>1. Keyboard input is received.<br>2. Paste and cut is performed.<br>3. Ctrl+V is pressed.| 135| onSubmit(callback: (enterKey: EnterKeyType, event<sup>11+</sup>: [SubmitEvent](#submitevent11)) => void) | Triggered when the Enter key on the keyboard is pressed.<br>**enterKey**: type of the Enter key. If it is **EnterKeyType.NEW_LINE** and the text box is in inline input style, **onSubmit** is not triggered. For details, see [EnterKeyType](#enterkeytype).<br>**event**: submission event. For details, see [SubmitEvent](#submitevent11).| 136| onEditChanged(callback: (isEditing: boolean) => void)<sup>(deprecated)</sup> | Triggered when the input status changes. Since API version 8, **onEditChange** is recommended.| 137| onEditChange(callback: (isEditing: boolean) => void)<sup>8+</sup> | Triggered when the input status changes. The text box is in the editing state when the caret is placed in it. If the value of **isEditing** is **true**, text input is in progress.| 138| onCopy(callback:(value: string) => void)<sup>8+</sup> | Triggered when the copy button on the pasteboard, which displays when the text box is long pressed, is clicked.<br>**value**: text to be copied.| 139| onCut(callback:(value: string) => void)<sup>8+</sup> | Triggered when the cut button on the pasteboard, which displays when the text box is long pressed, is clicked.<br>**value**: text to be cut.| 140| onPaste(callback:(value: string, event<sup>11+</sup>: [PasteEvent](ts-basic-components-richeditor.md#pasteevent11)) => void) | Triggered when the paste button on the pasteboard, which displays when the text box is long pressed, is clicked.<br>**value**: text to be pasted.<br>**event**: custom paste event.| 141| onTextSelectionChange(callback: (selectionStart: number, selectionEnd: number) => void)<sup>10+</sup> | Triggered when the text selection position changes.<br>**selectionStart**: start position of the text selection area. The start position of text in the text box is **0**.<br>**selectionEnd**: end position of the text selection area.| 142| onContentScroll(callback: (totalOffsetX: number, totalOffsetY: number) => void)<sup>10+</sup> | Triggered when the text content is scrolled.<br>**totalOffsetX**: X coordinate offset of the text in the content area.<br>**totalOffsetY**: Y coordinate offset of the text in the content area.| 143 144## TextInputController<sup>8+</sup> 145 146Implements the controller of the **\<TextInput>** component. 147 148### Objects to Import 149``` 150controller: TextInputController = new TextInputController() 151``` 152### caretPosition<sup>8+</sup> 153 154caretPosition(value: number): void 155 156Sets the position of the caret. 157 158**Parameters** 159 160| Name | Type | Mandatory | Description | 161| ----- | ------ | ---- | ------------------- | 162| value | number | Yes | Length from the start of the string to the position where the caret is located.| 163### setTextSelection<sup>10+</sup> 164 165setTextSelection(selectionStart: number, selectionEnd: number): void 166 167Sets the text selection area, which will be highlighted. 168 169**Parameters** 170 171| Name | Type | Mandatory | Description | 172| -------------- | ------ | ---- | ------------------------- | 173| selectionStart | number | Yes | Start position of the text selection range. The start position of text in the text box is 0.| 174| selectionEnd | number | Yes | End position of the text selection range. | 175> **NOTE** 176> 177> If **selectionStart** or **selectionEnd** is set to **undefined**, the value **0** will be used. 178### stopEditing<sup>10+</sup> 179 180stopEditing(): void 181 182Exits the editing state. 183 184### getTextContentRect<sup>10+</sup> 185 186getTextContentRect(): [RectResult](#rectresult10) 187 188Obtains the position of the edited text area relative to the component and its size. The unit of the return value is pixel. 189 190**Return value** 191 192| Type | Description | 193| --------------------------- | ------------------- | 194| [RectResult](#rectresult10) | Position of the edited text area relative to the component and its size.| 195 196> **NOTE** 197> 198> - If no text is entered, the return value contains the position information, but the size is 0. 199> - The position information is the offset of the first character relative to the editable area. 200 201### RectResult<sup>10+</sup> 202 203Describes the position and size. 204 205| Parameter | Type | Description | 206| ------ | ------ | -------- | 207| x | number | X coordinate.| 208| y | number | Y coordinate.| 209| width | number | Content width. | 210| height | number | Content height. | 211 212 213### getTextContentLineCount<sup>10+</sup> 214 215getTextContentLineCount(): number 216 217Obtains the number of lines of the edited text. 218 219**Return value** 220 221| Type | Description | 222| ------ | ---------- | 223| number | Number of lines of the edited text.| 224### getCaretOffset<sup>11+</sup> 225 226getCaretOffset(): CaretOffset 227 228Returns the position information of the caret. 229 230**Return value** 231 232| Type | Description | 233| --------------------------------- | ----------- | 234| [CaretOffset](#caretoffset11) | Position of the caret relative to the text box.| 235 236> **NOTE** 237> 238> - If this API is called when the caret position is updated in the current frame, it will not take effect. 239 240## CaretOffset<sup>11+</sup> 241| Name | Type | Description | 242| ----- | ------ | -------------- | 243| index | number | Index of the caret position. | 244| x | number | X coordinate of the caret relative to the text box.| 245| y | number | Y coordinate of the caret relative to the text box.| 246 247## InputCounterOptions<sup>11+</sup> 248 249| Name | Type | Description | 250| ------------------- | ------- | ---------------------------------------- | 251| thresholdPercentage | number | Threshold percentage for displaying the character counter. The character counter is displayed when the number of characters that have been entered is greater than the maximum number of characters multiplied by the threshold percentage value. When displayed, the character counter is in the following format: Number of characters that have been entered/Maximum number of characters allowed. <br> Value range: [1,100]<br>If the value exceeds the valid value range, the character counter is not displayed. If the value is **undefined**, the character counter is displayed, but this parameter has no effect.| 252| highlightBorder | boolean | If **options** is not set, the text box border turns red when the number of entered characters reaches the maximum. If the character counter is displayed and **thresholdPercentage** is set to a valid value, the text box border turns red when the number of entered characters reaches the maximum. The value **true** (default) means that the text box border turns red when the number of entered characters reaches the maximum.| 253 254## Example 255 256### Example 1 257 258```ts 259// xxx.ets 260@Entry 261@Component 262struct TextInputExample { 263 @State text: string = '' 264 @State positionInfo: CaretOffset = { index: 0, x: 0, y: 0 } 265 controller: TextInputController = new TextInputController() 266 267 build() { 268 Column() { 269 TextInput({ text: this.text, placeholder: 'input your word...', controller: this.controller }) 270 .placeholderColor(Color.Grey) 271 .placeholderFont({ size: 14, weight: 400 }) 272 .caretColor(Color.Blue) 273 .width('95%') 274 .height(40) 275 .margin(20) 276 .fontSize(14) 277 .fontColor(Color.Black) 278 .inputFilter('[a-z]', (e) => { 279 console.log(JSON.stringify(e)) 280 }) 281 .onChange((value: string) => { 282 this.text = value 283 }) 284 Text(this.text) 285 Button('Set caretPosition 1') 286 .margin(15) 287 .onClick(() => { 288 // Move the caret to after the first entered character. 289 this.controller.caretPosition(1) 290 }) 291 Button('Get CaretOffset') 292 .margin(15) 293 .onClick(() => { 294 this.positionInfo = this.controller.getCaretOffset() 295 }) 296 // Password text box. 297 TextInput({ placeholder: 'input your password...' }) 298 .width('95%') 299 .height(40) 300 .margin(20) 301 .type(InputType.Password) 302 .maxLength(9) 303 .showPasswordIcon(true) 304 // Inline-style text box. 305 TextInput({ text: 'inline style' }) 306 .width('95%') 307 .height(50) 308 .margin(20) 309 .borderRadius(0) 310 .style(TextInputStyle.Inline) 311 }.width('100%') 312 } 313} 314``` 315 316 317 318### Example 2 319 320```ts 321@Entry 322@Component 323struct TextInputExample { 324 @State PassWordSrc1: Resource = $r('app.media.onIcon') 325 @State PassWordSrc2: Resource = $r('app.media.offIcon') 326 @State TextError: string = '' 327 @State Text: string = '' 328 @State NameText: string = 'test' 329 330 @Builder itemEnd() { 331 Select([{ value: 'KB' }, 332 { value: 'MB' }, 333 { value: 'GB' }, 334 { value: 'TB', }]) 335 .height("48vp") 336 .borderRadius(0) 337 .selected(2) 338 .align(Alignment.Center) 339 .value('MB') 340 .font({ size: 20, weight: 500 }) 341 .fontColor('#182431') 342 .selectedOptionFont({ size: 20, weight: 400 }) 343 .optionFont({ size: 20, weight: 400 }) 344 .backgroundColor(Color.Transparent) 345 .responseRegion({ height: "40vp", width: "80%", x: '10%', y: '6vp' }) 346 .onSelect((index: number) => { 347 console.info('Select:' + index) 348 }) 349 } 350 351 build() { 352 Column({ space: 20 }) { 353 // Customize the password icon. 354 TextInput({ placeholder: 'Custom password icon' }) 355 .type(InputType.Password) 356 .width(380) 357 .height(60) 358 .passwordIcon({ onIconSrc: this.PassWordSrc1, offIconSrc: this.PassWordSrc2 }) 359 // Show an underline. 360 TextInput({ placeholder: 'Underline style' }) 361 .showUnderline(true) 362 .width(380) 363 .height(60) 364 .showError('Error') 365 .showUnit(this.itemEnd) 366 367 Text (`User name: ${this.Text}`) 368 .width('95%') 369 TextInput({ placeholder: 'Enter user name', text: this.Text }) 370 .showUnderline(true) 371 .width(380) 372 .showError(this.TextError) 373 .onChange((value: string) => { 374 this.Text = value 375 }) 376 .onSubmit(() => {// If the entered user name is incorrect, the text box will be cleared and the error message will be displayed. 377 if (this.Text == this.NameText) { 378 this.TextError = '' 379 } else { 380 this.TextError ='Incorrect user name.' 381 this.Text = '' 382 } 383 }) 384 385 }.width('100%') 386 } 387} 388``` 389 390 391 392### Example 3 393 394```ts 395// xxx.ets 396@Entry 397@Component 398struct TextInputExample { 399 controller: TextInputController = new TextInputController() 400 @State inputValue: string = "" 401 402 // Create a custom keyboard component. 403 @Builder CustomKeyboardBuilder() { 404 Column() { 405 Button('x').onClick(() => { 406 // Disable the custom keyboard. 407 this.controller.stopEditing() 408 }) 409 Grid() { 410 ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item:number|string) => { 411 GridItem() { 412 Button(item + "") 413 .width(110).onClick(() => { 414 this.inputValue += item 415 }) 416 } 417 }) 418 }.maxCount(3).columnsGap(10).rowsGap(10).padding(5) 419 }.backgroundColor(Color.Gray) 420 } 421 422 build() { 423 Column() { 424 TextInput({ controller: this.controller, text: this.inputValue }) 425 // Bind the custom keyboard. 426 .customKeyboard(this.CustomKeyboardBuilder()).margin(10).border({ width: 1 }) 427 } 428 } 429} 430``` 431 432 433 434 435### Example 4 436 437```ts 438// xxx.ets 439@Entry 440@Component 441struct ClearNodeExample { 442 controller: TextInputController = new TextInputController() 443 444 build() { 445 Column() { 446 TextInput({ placeholder: 'input ...', controller: this.controller }) 447 .width(380) 448 .height(60) 449 .cancelButton({ 450 style: CancelButtonStyle.CONSTANT, 451 icon: { 452 size: 45, 453 src: $r('app.media.icon'), 454 color: Color.Blue 455 } 456 }) 457 } 458 } 459} 460``` 461 462 463 464### Example 5 465 466```ts 467// xxx.ets 468@Entry 469@Component 470struct TextInputExample { 471 @State text: string = '' 472 controller: TextInputController = new TextInputController() 473 474 build() { 475 Column() { 476 TextInput({ text: this.text, controller: this.controller }) 477 .placeholderFont({ size: 16, weight: 400 }) 478 .width(336) 479 .height(56) 480 .maxLength(6) 481 .showUnderline(true) 482 .showCounter(true, { thresholdPercentage: 50, highlightBorder: true }) 483 // The character counter is in this format: Number of characters that have been entered/Maximum number of characters allowed, which is specified by maxLength(). 484 // The character counter is displayed when the number of characters that have been entered is greater than the maximum number of characters multiplied by 50% (threshold percentage). 485 // When highlightBorder is set to false, the text box border turns red when the number of entered characters reaches the maximum. The default value is true. 486 }.width('100%').height('100%').backgroundColor('#F1F3F5') 487 } 488} 489``` 490 491 492
