1# TextArea 2 3The **TextArea** component provides multi-line text input and automatically wraps text so that each line does not have more than the width of the component. 4 5If the component does not have its height set, it adapts its height to the content. If the component does not have its width set, it takes the maximum available width. 6 7> **NOTE** 8> 9> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 10 11 12## Child Components 13 14Not supported 15 16 17## APIs 18 19TextArea(value?: TextAreaOptions) 20 21**Atomic service API**: This API can be used in atomic services since API version 11. 22 23**Parameters** 24 25| Name|Type|Mandatory|Description| 26|-----|-----|----|----| 27| value | [TextAreaOptions](#textareaoptions) | No | Parameters of the **TextArea** component.| 28 29## TextAreaOptions 30 31**Atomic service API**: This API can be used in atomic services since API version 11. 32 33| Name | Type | Mandatory | Description | 34| ----------------------- | ---------------------------------------- | ---- | -------------- | 35| placeholder | [ResourceStr](ts-types.md#resourcestr) | No | Text displayed when there is no input. <br>When only the **placeholder** attribute is set, the text selection handle is still available; the caret stays at the beginning of the placeholder text when the handle is released. | 36| text | [ResourceStr](ts-types.md#resourcestr) | No | Current text input.<br>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).| 37| controller<sup>8+</sup> | [TextAreaController](#textareacontroller8) | No | Text area controller.| 38 39 40## Attributes 41 42Among 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. 43 44### placeholderColor 45 46placeholderColor(value: ResourceColor) 47 48Sets the placeholder text color. 49 50**Atomic service API**: This API can be used in atomic services since API version 11. 51 52**System capability**: SystemCapability.ArkUI.ArkUI.Full 53 54**Parameters** 55 56| Name| Type | Mandatory| Description | 57| ------ | ------------------------------------------ | ---- | -------------------------------------------- | 58| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Placeholder text color.<br>The default value follows the theme.| 59 60### placeholderFont 61 62placeholderFont(value: Font) 63 64Sets the placeholder text style, including the font size, font width, font family, and font style. Currently, only the default font family is supported. 65 66**Atomic service API**: This API can be used in atomic services since API version 11. 67 68**System capability**: SystemCapability.ArkUI.ArkUI.Full 69 70**Parameters** 71 72| Name| Type | Mandatory| Description | 73| ------ | ------------------------ | ---- | --------------------- | 74| value | [Font](ts-types.md#font) | Yes | Placeholder text style.| 75 76### textAlign 77 78textAlign(value: TextAlign) 79 80Sets the horizontal alignment of the text. 81 82Available options are **TextAlign.Start**, **TextAlign.Center**, and **TextAlign.End**. 83 84To 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. 85 86When **textAlign** is set to **TextAlign.JUSTIFY**, the text in the last line is horizontally aligned with the start edge. 87 88Since API version 11, **textAlign** can be set to **TextAlign.JUSTIFY**. 89 90**Atomic service API**: This API can be used in atomic services since API version 11. 91 92**System capability**: SystemCapability.ArkUI.ArkUI.Full 93 94**Parameters** 95 96| Name| Type | Mandatory| Description | 97| ------ | ------------------------------------------- | ---- | ---------------------------------------------------------- | 98| value | [TextAlign](ts-appendix-enums.md#textalign) | Yes | Horizontal alignment of the text.<br>Default value: **TextAlign.Start**| 99 100### caretColor 101 102caretColor(value: ResourceColor) 103 104Sets the color of the caret in the text box. 105 106**Atomic service API**: This API can be used in atomic services since API version 11. 107 108**System capability**: SystemCapability.ArkUI.ArkUI.Full 109 110**Parameters** 111 112| Name| Type | Mandatory| Description | 113| ------ | ------------------------------------------ | ---- | -------------------------------------- | 114| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Color of the caret in the text box.<br>Default value: **'#007DFF'**| 115 116> **NOTE** 117> 118> Since API version 12, this API can be used to set the text selection handle color, which is the same as the caret color. 119 120### inputFilter<sup>8+</sup> 121 122inputFilter(value: ResourceStr, error?: (value: string) => void) 123 124Sets the regular expression for input filtering. Only inputs that comply with the regular expression can be displayed. Other inputs are filtered out. The specified regular expression can match single characters, but not strings. 125 126**Atomic service API**: This API can be used in atomic services since API version 11. 127 128**System capability**: SystemCapability.ArkUI.ArkUI.Full 129 130**Parameters** 131 132| Name| Type | Mandatory| Description | 133| ------ | -------------------------------------- | ---- | ---------------------------------- | 134| value | [ResourceStr](ts-types.md#resourcestr) | Yes | Regular expression. | 135| error | (value: string) => void | No | Filtered-out content to return when regular expression matching fails.| 136 137### copyOption<sup>9+</sup> 138 139copyOption(value: CopyOptions) 140 141Sets whether copy and paste is allowed. If this attribute is set to **CopyOptions.None**, the paste operation is allowed, but the copy and cut operations are not. 142 143For dragging, **copyOption** only restricts whether text is selected and does not involve the dragging scope. 144 145**Atomic service API**: This API can be used in atomic services since API version 11. 146 147**System capability**: SystemCapability.ArkUI.ArkUI.Full 148 149**Parameters** 150 151| Name| Type | Mandatory| Description | 152| ------ | ------------------------------------------------ | ---- | ------------------------------------------------------------ | 153| value | [CopyOptions](ts-appendix-enums.md#copyoptions9) | Yes | Whether copy and paste is allowed.<br>Default value: **CopyOptions.LocalDevice**| 154 155### maxLength<sup>10+</sup> 156 157maxLength(value: number) 158 159Sets the maximum number of characters for text input. By default, there is no maximum number of characters. When the maximum number of characters is reached, no more characters can be entered, and the border turns red. 160 161**Atomic service API**: This API can be used in atomic services since API version 11. 162 163**System capability**: SystemCapability.ArkUI.ArkUI.Full 164 165**Parameters** 166 167| Name| Type | Mandatory| Description | 168| ------ | ------ | ---- | ---------------------- | 169| value | number | Yes | Maximum number of characters for text input.| 170 171### showCounter<sup>10+</sup> 172 173showCounter(value: boolean, options?: InputCounterOptions) 174 175Sets the character counter displayed when the number of characters entered exceeds the threshold. 176 177**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 entered/Character limit. 178 179It is visible when the number of characters entered is greater than the character limit multiplied by the threshold percentage value. If **options** is not set, the text box border and character counter subscript turn red when the number of characters entered reaches the limit. If **value** is set to **true** and **options** is set, the text box border and character counter subscript turn red and the text box shakes when the number of characters entered reaches the limit, 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**. The character counter is not displayed for text boxes in inline input style. 180 181**Atomic service API**: This API can be used in atomic services since API version 11. 182 183**System capability**: SystemCapability.ArkUI.ArkUI.Full 184 185**Parameters** 186 187| Name | Type | Mandatory| Description | 188| --------------------- | ------------------------------------------------------------ | ---- | ---------------- | 189| value | boolean | Yes | Whether to display the character counter.| 190| options<sup>11+</sup> | [InputCounterOptions](ts-basic-components-textinput.md#inputcounteroptions11) | No | Threshold percentage of the character counter.| 191 192### style<sup>10+</sup> 193 194style(value: TextContentStyle) 195 196Sets the polymorphic style of the text box. The inline input style is only available for the **TextAreaType.Normal** type. 197 198**Atomic service API**: This API can be used in atomic services since API version 11. 199 200**System capability**: SystemCapability.ArkUI.ArkUI.Full 201 202**Parameters** 203 204| Name| Type | Mandatory| Description | 205| ------ | ----------------------------------------------------------- | ---- | ----------------------------------------------------- | 206| value | [TextContentStyle](ts-appendix-enums.md#textcontentstyle10) | Yes | Polymorphic style of the text box.<br>Default value: **TextContentStyle.DEFAULT**| 207 208### enableKeyboardOnFocus<sup>10+</sup> 209 210enableKeyboardOnFocus(value: boolean) 211 212Sets whether to enable the input method when the component obtains focus in a way other than clicking. 213 214 215 216**Atomic service API**: This API can be used in atomic services since API version 11. 217 218**System capability**: SystemCapability.ArkUI.ArkUI.Full 219 220**Parameters** 221 222| Name| Type | Mandatory| Description | 223| ------ | ------- | ---- | ----------------------------------------------------------- | 224| value | boolean | Yes | Whether to enable the input method when the component obtains focus in a way other than clicking.<br>Default value: **true**| 225 226### selectionMenuHidden<sup>10+</sup> 227 228selectionMenuHidden(value: boolean) 229 230Sets whether to hide the text selection menu when the text box is long-pressed, double-touched, or right-clicked. 231 232**Atomic service API**: This API can be used in atomic services since API version 11. 233 234**System capability**: SystemCapability.ArkUI.ArkUI.Full 235 236**Parameters** 237 238| Name| Type | Mandatory| Description | 239| ------ | ------- | ---- | ------------------------------------------------------------ | 240| value | boolean | Yes | Whether to hide the text selection menu when the text box is long-pressed, double-touched, or right-clicked.<br>Default value: **false**| 241 242### barState<sup>10+</sup> 243 244barState(value: BarState) 245 246Sets the scrollbar display mode when the text box is editable. 247 248**Atomic service API**: This API can be used in atomic services since API version 11. 249 250**System capability**: SystemCapability.ArkUI.ArkUI.Full 251 252**Parameters** 253 254| Name| Type | Mandatory| Description | 255| ------ | ----------------------------------------- | ---- | ------------------------------------------------------------ | 256| value | [BarState](ts-appendix-enums.md#barstate) | Yes | Scrollbar display mode when the text box is editable.<br>Default value: **BarState.Auto**| 257 258### maxLines<sup>10+</sup> 259 260maxLines(value: number) 261 262Sets the maximum number of lines that can be displayed with the inline style in the editing state or with the non-inline style. 263 264**Atomic service API**: This API can be used in atomic services since API version 11. 265 266**System capability**: SystemCapability.ArkUI.ArkUI.Full 267 268**Parameters** 269 270| Name| Type | Mandatory| Description | 271| ------ | ----------------------------------------- | ---- | ------------------------------------------------------------ | 272| value | number | Yes | Maximum number of lines that can be displayed with the inline style in the editing state or with the non-inline style.<br>Default value: **3** with the inline style; **+∞** with the non-inline style, indicating that there is no maximum number of lines<br>Value range: (0, +∞)| 273 274### customKeyboard<sup>10+</sup> 275 276customKeyboard(value: CustomBuilder, options?: KeyboardOptions) 277 278Custom keyboard. 279 280When a custom keyboard is set, activating the text box opens the specified custom component, instead of the system input method. 281 282The 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. 283 284The custom keyboard is displayed on top of the current page, without compressing or raising the page. 285 286The custom keyboard cannot obtain the focus, but it blocks gesture events. 287 288By default, the custom keyboard is closed when the input component loses the focus. You can also use the [TextAreaController](#textareacontroller8).[stopEditing](#stopediting10) API to close the keyboard. 289 290When a custom keyboard is set, the text box does not support camera input, even when the device supports. 291 292**Atomic service API**: This API can be used in atomic services since API version 11. 293 294**System capability**: SystemCapability.ArkUI.ArkUI.Full 295 296**Parameters** 297 298| Name | Type | Mandatory| Description | 299| --------------------- | ------------------------------------------- | ---- | ------------------------------------------------------------ | 300| value | [CustomBuilder](ts-types.md#custombuilder8) | Yes | Custom keyboard.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 301| options<sup>12+</sup> | [KeyboardOptions](#keyboardoptions12) | No | Whether to support keyboard avoidance. | 302 303### type<sup>11+</sup> 304 305type(value: TextAreaType) 306 307Sets the text box type. 308 309**Atomic service API**: This API can be used in atomic services since API version 12. 310 311**System capability**: SystemCapability.ArkUI.ArkUI.Full 312 313**Parameters** 314 315| Name| Type | Mandatory| Description | 316| ------ | --------------------------------------- | ---- | -------------------------------------------- | 317| value | [TextAreaType](#textareatype11) | Yes | Text box type.<br>Default value: **TextAreaType.Normal**| 318 319### enableAutoFill<sup>12+</sup> 320 321enableAutoFill(value: boolean) 322 323Sets whether to enable autofill. 324 325**Atomic service API**: This API can be used in atomic services since API version 12. 326 327**System capability**: SystemCapability.ArkUI.ArkUI.Full 328 329**Parameters** 330 331| Name| Type | Mandatory| Description | 332| ------ | ------- | ---- | ------------------------------------------------------------ | 333| value | boolean | Yes | Whether to enable autofill.<br>**true**: enable<br>**false**: disable<br><br>Default value: **true**| 334 335### contentType<sup>12+</sup> 336 337contentType(contentType: ContentType) 338 339Sets the content type for autofill. 340 341**Atomic service API**: This API can be used in atomic services since API version 12. 342 343**System capability**: SystemCapability.ArkUI.ArkUI.Full 344 345**Parameters** 346 347| Name | Type | Mandatory| Description | 348| ----------- | ------------------------------------- | ---- | -------------- | 349| contentType | [ContentType](#contenttype12) | Yes | Content type for autofill.| 350 351### enterKeyType<sup>11+</sup> 352 353enterKeyType(value: EnterKeyType) 354 355Sets the type of the Enter key. 356 357**Atomic service API**: This API can be used in atomic services since API version 12. 358 359**System capability**: SystemCapability.ArkUI.ArkUI.Full 360 361**Parameters** 362 363| Name| Type | Mandatory| Description | 364| ------ | ------------------------------------------------ | ---- | ---------------------------------------------------- | 365| value | [EnterKeyType](ts-types.md#enterkeytype) | Yes | Type of the Enter key.<br>Default value: **EnterKeyType.NEW_LINE**| 366 367### lineHeight<sup>12+</sup> 368 369lineHeight(value: number | string | Resource) 370 371Sets the text line height. If the value is less than or equal to **0**, the line height is not limited and the font size is adaptive. If the value is of the number type, the unit fp is used. 372 373**System capability**: SystemCapability.ArkUI.ArkUI.Full 374 375**Parameters** 376 377| Name| Type | Mandatory| Description | 378| ------ | ------------------------------------------------------------ | ---- | ---------------- | 379| value | number \| string \| [Resource](ts-types.md#resource) | Yes | Text line height.| 380 381### decoration<sup>12+</sup> 382 383decoration(value: TextDecorationOptions) 384 385Sets the color, type, and style of the text decorative line. 386 387**System capability**: SystemCapability.ArkUI.ArkUI.Full 388 389**Parameters** 390 391| Name| Type | Mandatory| Description | 392| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 393| value | [TextDecorationOptions](#textdecorationoptions12) | Yes | Text decorative line options.<br>Default value: {<br> type: TextDecorationType.None,<br> color: Color.Black,<br> style: TextDecorationStyle.SOLID <br>} | 394 395### letterSpacing<sup>12+</sup> 396 397letterSpacing(value: number | string | Resource) 398 399Sets the letter spacing for a text style. If the value specified is a percentage or 0, the default value is used. 400 401If the value specified is a negative value, the text is compressed. A negative value too small may result in the text being compressed to 0 and no content being displayed. 402 403**System capability**: SystemCapability.ArkUI.ArkUI.Full 404 405**Parameters** 406 407| Name| Type | Mandatory| Description | 408| ------ | -------------------------- | ---- | -------------- | 409| value | number \| string \| [Resource](ts-types.md#resource) | Yes | Letter spacing.| 410 411### fontFeature<sup>12+</sup> 412 413fontFeature(value: string) 414 415Sets the font feature, for example, monospaced digits. 416 417Format: normal \| \<feature-tag-value\> 418 419Format of **\<feature-tag-value\>**: \<string\> \[ \<integer\> \| on \| off ] 420 421There can be multiple **\<feature-tag-value\>** values, which are separated by commas (,). 422 423For example, the input format for monospaced clock fonts is "ss01" on. 424 425**System capability**: SystemCapability.ArkUI.ArkUI.Full 426 427**Parameters** 428 429| Name| Type | Mandatory| Description | 430| ------ | ------ | ---- | -------------- | 431| value | string | Yes | Font feature.| 432 433For details about the supported font features, see [Font Feature List](ts-basic-components-text.md#fontfeature12). 434Font features are advanced typographic features, such as ligatures and monospace, for OpenType fonts. They are typically used in custom fonts and require the support of the font itself. 435For more information about the font features, see [Low-level font feature settings control: the font-feature-settings property](https://www.w3.org/TR/css-fonts-3/#font-feature-settings-prop) and [The Complete CSS Demo for OpenType Features](https://sparanoid.com/lab/opentype-features/). 436### wordBreak<sup>12+</sup> 437 438wordBreak(value: WordBreak) 439 440Sets the word break rule. This attribute does not take effect for the placeholder text. 441 442**System capability**: SystemCapability.ArkUI.ArkUI.Full 443 444**Parameters** 445 446| Name| Type | Mandatory| Description | 447| ------ | --------------------------------------------- | ---- | --------------------------------------------- | 448| value | [WordBreak](ts-appendix-enums.md#wordbreak11) | Yes | Word break rule.<br>Default value: **WordBreak.BREAK_WORD**| 449 450> **NOTE** 451> 452> The component does not support the **clip** attribute. Therefore, setting this attribute does not affect text clipping. 453 454### selectedBackgroundColor<sup>12+</sup> 455 456selectedBackgroundColor(value: ResourceColor) 457 458Sets the background color of the selected text. If the opacity is not set, a 20% opacity will be used. 459 460**System capability**: SystemCapability.ArkUI.ArkUI.Full 461 462**Parameters** 463 464| Name| Type | Mandatory| Description | 465| ------ | ------------------------------------------ | ---- | ------------------------------------------ | 466| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Background color of the selected text.<br>By default, a 20% opacity is applied.| 467 468### caretStyle<sup>12+</sup> 469 470caretStyle(value: CaretStyle) 471 472Sets the caret style. 473 474**System capability**: SystemCapability.ArkUI.ArkUI.Full 475 476**Parameters** 477 478| Name| Type | Mandatory| Description | 479| ------ | ----------------------------------- | ---- | ------------ | 480| value | [CaretStyle](ts-text-common.md#caretstyle10) | Yes | Caret style.| 481 482### textIndent<sup>12+</sup> 483 484textIndent(value: Dimension) 485 486Sets the indent of the first line text. 487 488**System capability**: SystemCapability.ArkUI.ArkUI.Full 489 490**Parameters** 491 492| Name| Type | Mandatory| Description | 493| ------ | ----------------------------------- | ---- | ---------------------------- | 494| value | [Dimension](ts-types.md#dimension10)| Yes | Indent of the first line text.<br>Default value: **0**| 495 496### textOverflow<sup>12+</sup> 497 498textOverflow(value: TextOverflow) 499 500Sets the display mode when the text is too long. This attribute is supported in inline and non-inline input modes. 501 502Text is clipped at the transition between words. To clip text in the middle of a word, set **wordBreak** to **WordBreak.BREAK_ALL**. 503 504If **overflow** is set to **TextOverflow.None**, **TextOverflow.Clip**, or **TextOverflow.Ellipsis**, this attribute must be used with **maxLines** for the settings to take effect. **TextOverflow.None** produces the same effect as **TextOverflow.Clip**. 505 506**Widget capability**: This API can be used in ArkTS widgets. 507 508**System capability**: SystemCapability.ArkUI.ArkUI.Full 509 510**Parameters** 511 512| Name| Type | Mandatory| Description | 513| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 514| value | [TextOverflow](ts-appendix-enums.md#textoverflow) | Yes | Display mode when the text is too long.<br>Default value: **TextOverflow.Clip** | 515 516> **NOTE** 517> The **TextArea** component does not support the **TextOverflow.MARQUEE** mode. If this attribute is set to **TextOverflow.MARQUEE**, **TextOverflow.Clip** is used instead. 518 519### minFontSize<sup>12+</sup> 520 521minFontSize(value: number | string | Resource) 522 523Sets the minimum font size. 524 525For the setting to take effect, this attribute must be used together with [maxFontSize](#maxfontsize12) and [maxLines](#maxlines10), or layout constraint settings. 526 527When the adaptive font size is used, the **fontSize** settings do not take effect. 528 529**System capability**: SystemCapability.ArkUI.ArkUI.Full 530 531**Parameters** 532 533| Name| Type | Mandatory| Description | 534| ------ | ------------------------------------------------------------ | ---- | ------------------ | 535| value | number \| string \| [Resource](ts-types.md#resource) | Yes | Minimum font size.| 536 537### maxFontSize<sup>12+</sup> 538 539maxFontSize(value: number | string | Resource) 540 541Sets the maximum font size. 542 543For the setting to take effect, this attribute must be used together with [minFontSize](#minfontsize12) and [maxLines](#maxlines10), or layout constraint settings. 544 545When the adaptive font size is used, the **fontSize** settings do not take effect. 546 547**System capability**: SystemCapability.ArkUI.ArkUI.Full 548 549**Parameters** 550 551| Name| Type | Mandatory| Description | 552| ------ | ------------------------------------------------------------ | ---- | ------------------ | 553| value | number \| string \| [Resource](ts-types.md#resource) | Yes | Maximum font size.| 554 555### heightAdaptivePolicy<sup>12+</sup> 556 557heightAdaptivePolicy(value: TextHeightAdaptivePolicy) 558 559Sets how the adaptive height is determined for the text. 560 561When this attribute is set to **TextHeightAdaptivePolicy.MAX_LINES_FIRST**, the [maxLines](#maxlines10) attribute takes precedence for adjusting the text height. If the **maxLines** setting results in a layout beyond the layout constraints, the text will shrink to a font size between [minFontSize](#minfontsize12) and [maxFontSize](#maxfontsize12) to allow for more content to be shown. 562If the text box is in inline input style, the font size in the editing state is different from that in the non-editing state. 563 564If this attribute is set to **TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST**, the **minFontSize** attribute takes precedence for adjusting the text height. If the text can fit in one line with the **minFontSize** setting, the text will enlarge to the largest possible font size between **minFontSize** and **maxFontSize**. 565 566If this attribute is set to **TextHeightAdaptivePolicy.LAYOUT_CONSTRAINT_FIRST**, the layout constraints take precedence for adjusting the text height. If the resultant layout is beyond the layout constraints, the text will shrink to a font size between **minFontSize** and **maxFontSize** to respect the layout constraints. 567 568**System capability**: SystemCapability.ArkUI.ArkUI.Full 569 570**Parameters** 571 572| Name| Type | Mandatory| Description | 573| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 574| value | [TextHeightAdaptivePolicy](ts-appendix-enums.md#textheightadaptivepolicy10) | Yes | How the adaptive height is determined for the text.<br>Default value: **TextHeightAdaptivePolicy.MAX_LINES_FIRST**| 575 576### lineSpacing<sup>12+</sup> 577 578lineSpacing(value: LengthMetrics) 579 580Sets the line spacing of the text. If the value specified is less than or equal to 0, the default value **0** is used. 581 582**System capability**: SystemCapability.ArkUI.ArkUI.Full 583 584**Parameters** 585 586| Name| Type | Mandatory| Description | 587| ------ | ------------------------------------------------------------ | ---- | ---------------- | 588| value | [LengthMetrics](ts-types.md#lengthmetrics12) | Yes | Line spacing. Default value: **0**| 589 590### lineBreakStrategy<sup>12+</sup> 591 592lineBreakStrategy(strategy: LineBreakStrategy) 593 594Sets the line break rule. This attribute takes effect when **wordBreak** is not set to **breakAll**. Hyphens are not supported. 595 596**Atomic service API**: This API can be used in atomic services since API version 12. 597 598**System capability**: SystemCapability.ArkUI.ArkUI.Full 599 600**Parameters** 601 602| Name | Type | Mandatory| Description | 603| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------- | 604| strategy | [LineBreakStrategy](ts-appendix-enums.md#linebreakstrategy12) | Yes | Line break rule.<br>Default value: **LineBreakStrategy.GREEDY**| 605 606### editMenuOptions<sup>12+</sup> 607 608editMenuOptions(editMenu: EditMenuOptions) 609 610Sets the extended options of the custom context menu on selection, including the text content, icon, and callback. 611 612**Atomic service API**: This API can be used in atomic services since API version 12. 613 614**System capability**: SystemCapability.ArkUI.ArkUI.Full 615 616**Parameters** 617 618| Name| Type | Mandatory| Description | 619| ------ | --------------------------------------------- | ---- | --------------------------------------------- | 620| editMenu | [EditMenuOptions](ts-text-common.md#editmenuoptions) | Yes | Extended options of the custom context menu on selection.| 621 622> **NOTE** 623> 624> The default value of the universal attribute [padding](ts-universal-attributes-size.md#padding) is as follows:<br>{<br> top: '8vp',<br> right: '16vp',<br> bottom: '8vp',<br> left: '16vp'<br> } 625> 626> Since API version 11, **.width('auto')** can be set for the **TextArea** 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). 627 628## Events 629 630In addition to the [universal events](ts-universal-events-click.md), the following events are supported. 631 632### onChange 633 634onChange(callback: (value: string) => void) 635 636Called when the input in the text box changes. 637 638**Atomic service API**: This API can be used in atomic services since API version 11. 639 640**System capability**: SystemCapability.ArkUI.ArkUI.Full 641 642**Parameters** 643 644| Name| Type | Mandatory| Description | 645| ------ | ------ | ---- | -------------------- | 646| value | string | Yes | Text entered.| 647 648### onEditChange<sup>10+</sup> 649 650onEditChange(callback: (isEditing: boolean) => void) 651 652Called when the input status changes. The text box is in the editing state when it has the caret placed in it, and is in the non-editing state otherwise. If the value of **isEditing** is **true**, the text box is in the editing state. 653 654**Atomic service API**: This API can be used in atomic services since API version 11. 655 656**System capability**: SystemCapability.ArkUI.ArkUI.Full 657 658**Parameters** 659 660| Name | Type | Mandatory| Description | 661| --------- | ------- | ---- | -------------------- | 662| isEditing | boolean | Yes | Whether the text box is in the editing state. The value **true** indicates that the text box is in the editing state.| 663 664### onCopy<sup>8+</sup> 665 666onCopy(callback:(value: string) => void) 667 668Called when the copy button on the pasteboard, which displays when the text box is long pressed, is clicked. 669 670**Atomic service API**: This API can be used in atomic services since API version 11. 671 672**System capability**: SystemCapability.ArkUI.ArkUI.Full 673 674**Parameters** 675 676| Name| Type | Mandatory| Description | 677| ------ | ------ | ---- | ---------------- | 678| value | string | Yes | Text that is copied.| 679 680### onCut<sup>8+</sup> 681 682onCut(callback:(value: string) => void) 683 684Called when the cut button on the pasteboard, which displays when the text box is long pressed, is clicked. 685 686**Atomic service API**: This API can be used in atomic services since API version 11. 687 688**System capability**: SystemCapability.ArkUI.ArkUI.Full 689 690**Parameters** 691 692| Name| Type | Mandatory| Description | 693| ------ | ------ | ---- | ---------------- | 694| value | string | Yes | Text that is cut.| 695 696### onPaste 697 698onPaste(callback:(value: string, event: PasteEvent) => void) 699 700Called when the paste button on the pasteboard, which displays when the text box is long pressed, is clicked. 701 702**Atomic service API**: This API can be used in atomic services since API version 11. 703 704**System capability**: SystemCapability.ArkUI.ArkUI.Full 705 706**Parameters** 707 708| Name | Type | Mandatory| Description | 709| ------------------- | ------------------------------------------------------------ | ---- | ---------------------- | 710| value | string | Yes | Text to be pasted. | 711| event<sup>11+</sup> | [PasteEvent](ts-basic-components-richeditor.md#pasteevent11) | No | Custom paste event.| 712 713### onTextSelectionChange<sup>10+</sup> 714 715onTextSelectionChange(callback: (selectionStart: number, selectionEnd: number) => void) 716 717Called when the text selection changes. 718 719**Atomic service API**: This API can be used in atomic services since API version 11. 720 721**System capability**: SystemCapability.ArkUI.ArkUI.Full 722 723**Parameters** 724 725| Name | Type | Mandatory| Description | 726| -------------- | ------ | ---- | --------------------------------------- | 727| selectionStart | number | Yes | Start position of the selected text. The start position of text is **0**.| 728| selectionEnd | number | Yes | End position of the selected text. | 729 730### onContentScroll<sup>10+</sup> 731 732onContentScroll(callback: (totalOffsetX: number, totalOffsetY: number) => void) 733 734Called when the text content is scrolled. 735 736**Atomic service API**: This API can be used in atomic services since API version 11. 737 738**System capability**: SystemCapability.ArkUI.ArkUI.Full 739 740**Parameters** 741 742| Name | Type | Mandatory| Description | 743| ------------ | ------ | ---- | ---------------------------------- | 744| totalOffsetX | number | Yes | Offset in the X coordinate of the text in the content area, in px.| 745| totalOffsetY | number | Yes | Offset in the Y coordinate of the text in the content area, in px.| 746 747### onSubmit<sup>11+</sup> 748 749onSubmit(callback: (enterKey: EnterKeyType) => void) 750 751Called when the Enter key on the keyboard is pressed. 752 753**Atomic service API**: This API can be used in atomic services since API version 12. 754 755**System capability**: SystemCapability.ArkUI.ArkUI.Full 756 757**Parameters** 758 759| Name | Type | Mandatory| Description | 760| -------- | ------------------------------------------------ | ---- | ------------------------------------------------------------ | 761| enterKey | [EnterKeyType](ts-types.md#enterkeytype) | Yes | Type of the Enter key. If it is **EnterKeyType.NEW_LINE** and the text box is in inline input style, **onSubmit** is not triggered.| 762 763### onWillInsert<sup>12+</sup> 764 765onWillInsert(callback: Callback\<InsertValue, boolean>) 766 767Called when text is about to be inserted. 768 769**System capability**: SystemCapability.ArkUI.ArkUI.Full 770 771**Parameters** 772 773| Name| Type | Mandatory| Description | 774| ------ | ------------------------------------------------------------ | ---- | ------------------ | 775| callback | Callback\<[InsertValue](#insertvalue12), boolean> | Yes | Callback triggered when text is about to be inserted.<br>It returns **true** if the text is inserted; returns **false** otherwise.<br>This callback is not called for text preview.<br>It is available only for system input methods.| 776 777### onDidInsert<sup>12+</sup> 778 779onDidInsert(callback: Callback\<InsertValue>) 780 781Called when text is inserted. 782 783**System capability**: SystemCapability.ArkUI.ArkUI.Full 784 785**Parameters** 786 787| Name| Type | Mandatory| Description | 788| ------ | ------------------------------------------------------------ | ---- | ------------------ | 789| callback | Callback\<[InsertValue](#insertvalue12)> | Yes | Callback triggered when text is inserted.<br>It is available only for system input methods.| 790 791### onWillDelete<sup>12+</sup> 792 793onWillDelete(callback: Callback\<DeleteValue, boolean>) 794 795Called when text is about to be deleted. 796 797**System capability**: SystemCapability.ArkUI.ArkUI.Full 798 799**Parameters** 800 801| Name| Type | Mandatory| Description | 802| ------ | ------------------------------------------------------------ | ---- | ------------------ | 803| callback | Callback\<[DeleteValue](#deletevalue12), boolean> | Yes | Callback triggered when text is about to be deleted.<br>It returns **true** if the text is deleted; returns **false** otherwise.<br>This callback is not called for text preview.<br>It is available only for system input methods.| 804 805### onDidDelete<sup>12+</sup> 806 807onDidDelete(callback: Callback\<DeleteValue>) 808 809Called when text is deleted. 810 811**System capability**: SystemCapability.ArkUI.ArkUI.Full 812 813**Parameters** 814 815| Name| Type | Mandatory| Description | 816| ------ | ------------------------------------------------------------ | ---- | ------------------ | 817| callback | Callback\<[DeleteValue](#deletevalue12)> | Yes | Callback triggered when text is deleted.<br>It is available only for system input methods.| 818 819## TextAreaController<sup>8+</sup> 820 821Inherits from [TextContentControllerBase](ts-types.md#textcontentcontrollerbase10). 822 823**Atomic service API**: This API can be used in atomic services since API version 11. 824 825### Objects to Import 826 827``` 828controller: TextAreaController = new TextAreaController() 829``` 830 831### caretPosition<sup>8+</sup> 832 833caretPosition(value: number): void 834 835Sets the position of the caret. 836 837**Atomic service API**: This API can be used in atomic services since API version 11. 838 839**Parameters** 840 841| Name| Type| Mandatory| Description | 842| ------ | -------- | ---- | -------------------------------------- | 843| value | number | Yes | Length from the start of the string to the position where the caret is located.| 844 845### setTextSelection<sup>10+</sup> 846 847setTextSelection(selectionStart: number, selectionEnd: number, options?: SelectionOptions): void 848 849Sets the text selection range and highlights the selected text when the component is focused. This API works only when the value of **selectionStart** is less than that of **selectionEnd**. 850 851**Parameters** 852 853| Name | Type| Mandatory| Description | 854| -------------- | -------- | ---- | ------------------------------------------------------------ | 855| selectionStart | number | Yes | Start position of the text selection range. The start position of text in the text box is 0.<br>A value less than 0 is handled as **0**. A value greater than the maximum text length is handled as the maximum text length.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 856| selectionEnd | number | Yes | End position of the text selection range.<br>A value less than 0 is handled as the value **0**. A value greater than the maximum text length is handled as the maximum text length.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 857| options<sup>12+</sup> | [SelectionOptions](#selectionoptions12) | No | Configuration options for text selection.<br>Default value: **MenuPolicy.DEFAULT**<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 858> **NOTE** 859> 860> If **selectionMenuHidden** is set to **true** or a 2-in-1 device is used, calling **setTextSelection** does not display the context menu even when **options** is set to **MenuPolicy.SHOW**. 861> 862> If the selected text contains an emoji, the emoji is selected when its start position is within the text selection range. 863 864### stopEditing<sup>10+</sup> 865 866stopEditing(): void 867 868Exits the editing state. 869 870**Atomic service API**: This API can be used in atomic services since API version 11. 871 872**System capability**: SystemCapability.ArkUI.ArkUI.Full 873 874## TextDecorationOptions<sup>12+</sup> 875 876| Name | Type | Mandatory| Description | 877| ------- | ----------------------------------------------------------- | ---- | ------------------------------------------------------------ | 878| type | [TextDecorationType](ts-appendix-enums.md#textdecorationtype) | Yes | Type of the text decorative line.| 879| color | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the text decorative line.| 880| style | [TextDecorationStyle](ts-appendix-enums.md#textdecorationstyle12) | No | Style of the text decorative line.| 881 882## TextAreaType<sup>11+</sup> 883 884| Name | Value | Description | 885| ------------------ | ------ | ------------- | 886| NORMAL | 0 | Normal input mode.<br>The value can contain digits, letters, underscores (_), spaces, and special characters.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 887| NUMBER | 2 | Digit input mode.<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 888| PHONE_NUMBER | 3 | Phone number input mode.<br>In this mode, the following are allowed: digits, spaces, plus signs (+), hyphens (-), asterisks (*), and number signs (#); the length is not limited.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 889| EMAIL | 5 | Email address input mode.<br>The value can contain digits, letters, underscores (_), and at signs (@). Only one at sign (@) is allowed.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 890| NUMBER_DECIMAL<sup>12+</sup> | 12 | Number input mode with a decimal point.<br>The value can contain digits and one decimal point.| 891| URL<sup>12+</sup> | 13 | URL input mode.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 892 893## ContentType<sup>12+</sup> 894 895Enumerates the content types for autofill. 896 897| Name | Value | Description | 898| -------------------------- | ---- | ------------------------------------------------------------ | 899| USER_NAME | 0 | Username. Password Vault, when enabled, can automatically save and fill in usernames.| 900| PASSWORD | 1 | Password. Password Vault, when enabled, can automatically save and fill in passwords.| 901| NEW_PASSWORD | 2 | New password. Password Vault, when enabled, can automatically generate a new password. | 902| FULL_STREET_ADDRESS | 3 | Full street address. The scenario-based autofill feature, when enabled, can automatically save and fill in full street addresses.| 903| HOUSE_NUMBER | 4 | House number. The scenario-based autofill feature, when enabled, can automatically save and fill in house numbers.| 904| DISTRICT_ADDRESS | 5 | District and county. The scenario-based autofill feature, when enabled, can automatically save and fill in districts and counties.| 905| CITY_ADDRESS | 6 | City. The scenario-based autofill feature, when enabled, can automatically save and fill in cities.| 906| PROVINCE_ADDRESS | 7 | Province. The scenario-based autofill feature, when enabled, can automatically save and fill in provinces.| 907| COUNTRY_ADDRESS | 8 | Country. The scenario-based autofill feature, when enabled, can automatically save and fill in countries.| 908| PERSON_FULL_NAME | 9 | Full name. The scenario-based autofill feature, when enabled, can automatically save and fill in full names.| 909| PERSON_LAST_NAME | 10 | Last name. The scenario-based autofill feature, when enabled, can automatically save and fill in last names.| 910| PERSON_FIRST_NAME | 11 | First name. The scenario-based autofill feature, when enabled, can automatically save and fill in first names.| 911| PHONE_NUMBER | 12 | Phone number. The scenario-based autofill feature, when enabled, can automatically save and fill in phone numbers.| 912| PHONE_COUNTRY_CODE | 13 | Country code. The scenario-based autofill feature, when enabled, can automatically save and fill in country codes.| 913| FULL_PHONE_NUMBER | 14 | Phone number with country code. The scenario-based autofill feature, when enabled, can automatically save and fill in phone numbers with country codes.| 914| EMAIL_ADDRESS | 15 | Email address. The scenario-based autofill feature, when enabled, can automatically save and fill in email addresses.| 915| BANK_CARD_NUMBER | 16 | Bank card number. The scenario-based autofill feature, when enabled, can automatically save and fill in bank card numbers.| 916| ID_CARD_NUMBER | 17 | ID card number. The scenario-based autofill feature, when enabled, can automatically save and fill in ID card numbers.| 917| NICKNAME | 23 | Nickname. The scenario-based autofill feature, when enabled, can automatically save and fill in nicknames.| 918| DETAIL_INFO_WITHOUT_STREET | 24 | Address information without street address. The scenario-based autofill feature, when enabled, can automatically save and fill in address information without street addresses.| 919| FORMAT_ADDRESS | 25 | Standard address. The scenario-based autofill feature, when enabled, can automatically save and fill in standard addresses.| 920 921## SelectionOptions<sup>12+</sup> 922 923Provides the configuration options for text selection. 924 925| Name | Type | Mandatory| Description | 926| ---------- | ----------------------------------------------- | ---- | ---------------- | 927| menuPolicy | [MenuPolicy](ts-appendix-enums.md#menupolicy12) | No | Menu display policy.| 928 929## KeyboardOptions<sup>12+</sup> 930 931Sets whether to support keyboard avoidance. 932 933| Name | Type | Mandatory| Description | 934| ---------------- | ------- | ---- | ------------------------------------------------------------ | 935| supportAvoidance | boolean | No | Whether to support keyboard avoidance. The value **true** means to support keyboard avoidance, and **false** (default) means the opposite.| 936 937## InsertValue<sup>12+</sup> 938 939| Name | Type | Mandatory| Description | 940| ------- | ----------------------------------------------------------- | ---- | ------------------------------------------------------------ | 941| insertOffset | number | Yes | Position of the inserted text.| 942| insertValue | string | Yes | Content of the inserted text.| 943 944## DeleteValue<sup>12+</sup> 945 946| Name | Type | Mandatory| Description | 947| ------- | ----------------------------------------------------------- | ---- | ------------------------------------------------------------ | 948| deleteOffset | number | Yes | Position of the deleted text.| 949| direction | [TextDeleteDirection](ts-appendix-enums.md#textdeletedirection12) | Yes | Direction for deleting the text.| 950| deleteValue | string | Yes | Content of the deleted text.| 951 952## Example 953 954### Example 1 955 956```ts 957// xxx.ets 958@Entry 959@Component 960struct TextAreaExample { 961 @State text: string = '' 962 @State positionInfo: CaretOffset = { index: 0, x: 0, y: 0 } 963 controller: TextAreaController = new TextAreaController() 964 965 build() { 966 Column() { 967 TextArea({ 968 text: this.text, 969 placeholder: 'The text area can hold an unlimited amount of text. input your word...', 970 controller: this.controller 971 }) 972 .placeholderFont({ size: 16, weight: 400 }) 973 .width(336) 974 .height(56) 975 .margin(20) 976 .fontSize(16) 977 .fontColor('#182431') 978 .backgroundColor('#FFFFFF') 979 .onChange((value: string) => { 980 this.text = value 981 }) 982 Text(this.text) 983 Button('Set caretPosition 1') 984 .backgroundColor('#007DFF') 985 .margin(15) 986 .onClick(() => { 987 // Move the caret to after the first entered character. 988 this.controller.caretPosition(1) 989 }) 990 Button('Get CaretOffset') 991 .backgroundColor('#007DFF') 992 .margin(15) 993 .onClick(() => { 994 this.positionInfo = this.controller.getCaretOffset() 995 }) 996 }.width('100%').height('100%').backgroundColor('#F1F3F5') 997 } 998} 999``` 1000 1001 1002 1003### Example 2 1004 1005```ts 1006// xxx.ets 1007@Entry 1008@Component 1009struct TextAreaExample { 1010 @State text: string = 'test' 1011 @State counterVisible: boolean = false 1012 @State maxNumber: number = -1 1013 controller: TextAreaController = new TextAreaController() 1014 1015 build() { 1016 Column() { 1017 TextArea({ 1018 text: this.text, 1019 placeholder: 'The text area can hold an unlimited amount of text. input your word...', 1020 controller: this.controller 1021 }) 1022 .placeholderFont({ size: 16, weight: 400 }) 1023 .width(336) 1024 .height(56) 1025 .margin(20) 1026 .fontSize(16) 1027 .fontColor('#182431') 1028 .maxLength(4) 1029 .showCounter(true) 1030 .backgroundColor('#FFFFFF') 1031 .onChange((value: string) => { 1032 this.text = value 1033 }) 1034 }.width('100%').height('100%').backgroundColor('#F1F3F5') 1035 } 1036} 1037``` 1038 1039 1040 1041 1042### Example 3 1043 1044```ts 1045// xxx.ets 1046@Entry 1047@Component 1048struct TextAreaExample { 1049 controller: TextAreaController = new TextAreaController() 1050 @State inputValue: string = "" 1051 1052 // Create a custom keyboard component. 1053 @Builder CustomKeyboardBuilder() { 1054 Column() { 1055 Button('x').onClick(() => { 1056 // Disable the custom keyboard. 1057 this.controller.stopEditing() 1058 }) 1059 Grid() { 1060 ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item: number | string) => { 1061 GridItem() { 1062 Button(item + "") 1063 .width(110).onClick(() => { 1064 this.inputValue += item 1065 }) 1066 } 1067 }) 1068 }.maxCount(3).columnsGap(10).rowsGap(10).padding(5) 1069 }.backgroundColor(Color.Gray) 1070 } 1071 1072 build() { 1073 Column() { 1074 TextArea({ controller: this.controller, text: this.inputValue}) 1075 // Bind the custom keyboard. 1076 .customKeyboard(this.CustomKeyboardBuilder()).margin(10).border({ width: 1 }) 1077 .height(200) 1078 } 1079 } 1080} 1081``` 1082 1083 1084 1085### Example 4 1086 1087```ts 1088// xxx.ets 1089@Entry 1090@Component 1091struct TextAreaExample { 1092 @State text: string = '' 1093 controller: TextAreaController = new TextAreaController() 1094 1095 build() { 1096 Column() { 1097 TextArea({ text: this.text, controller: this.controller }) 1098 .placeholderFont({ size: 16, weight: 400 }) 1099 .width(336) 1100 .height(56) 1101 .maxLength(6) 1102 .showCounter(true, { thresholdPercentage: 50, highlightBorder: true }) 1103 // The character counter is in this format: Number of characters that have been entered/Maximum number of characters allowed, which is specified by maxLength(). 1104 // 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). 1105 // 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. 1106 .onChange((value: string) => { 1107 this.text = value 1108 }) 1109 }.width('100%').height('100%').backgroundColor('#F1F3F5') 1110 } 1111} 1112``` 1113 1114 1115 1116 1117### Example 5 1118```ts 1119// xxx.ets 1120@Entry 1121@Component 1122struct TextInputExample { 1123 @State Text: string = '' 1124 @State enterTypes: Array<EnterKeyType> = [EnterKeyType.Go, EnterKeyType.Search, EnterKeyType.Send, EnterKeyType.Done, EnterKeyType.Next, EnterKeyType.PREVIOUS, EnterKeyType.NEW_LINE] 1125 @State index: number = 0 1126 build() { 1127 Column({ space: 20 }) { 1128 TextArea({ placeholder: 'Enter user name', text: this.Text }) 1129 .width(380) 1130 .enterKeyType(this.enterTypes[this.index]) 1131 .onChange((value: string) => { 1132 this.Text = value 1133 }) 1134 .onSubmit((enterKey: EnterKeyType) => { 1135 console.log("trigger area onsubmit" + enterKey); 1136 }) 1137 Button ('Change EnterKeyType').onClick () => { 1138 this.index = (this.index + 1) % this.enterTypes.length; 1139 }) 1140 1141 }.width('100%') 1142 } 1143} 1144``` 1145 1146 1147 1148 1149### Example 6 1150This example shows how to set the **wordBreak** attribute for the **TextArea** component. 1151 1152```ts 1153// xxx.ets 1154@Entry 1155@Component 1156struct TextAreaExample { 1157 build() { 1158 Column() { 1159 Text("WordBreakType as NORMAL: ").fontSize(16).fontColor(0xFF0000) 1160 TextArea({ 1161 text: 'This is set wordBreak to WordBreak text Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu.' 1162 }) 1163 .fontSize(16) 1164 .border({ width: 1 }) 1165 .wordBreak(WordBreak.NORMAL) 1166 Text ("WordBreakType as BREAK_ALL") .fontSize (16).fontColor (0xFF0000) 1167 TextArea({ 1168 text: 'This is set wordBreak to WordBreak text Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu.' 1169 }) 1170 .fontSize(16) 1171 .border({ width: 1 }) 1172 .wordBreak(WordBreak.BREAK_ALL) 1173 Text("WordBreakType as BREAK_WORD: ").fontSize(16).fontColor(0xFF0000) 1174 TextArea({ 1175 text: 'This is set wordBreak to WordBreak text Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu.' 1176 }) 1177 .fontSize(16) 1178 .border({ width: 1 }) 1179 .wordBreak(WordBreak.BREAK_WORD) 1180 } 1181 } 1182} 1183``` 1184 1185 1186 1187### Example 7 1188 1189This example shows how to use the **lineHeight**, **letterSpacing**, and **decoration** attributes. 1190 1191```ts 1192// xxx.ets 1193@Entry 1194@Component 1195struct TextAreaExample { 1196 build() { 1197 Row() { 1198 Column() { 1199 Text('lineHeight').fontSize(9).fontColor(0xCCCCCC) 1200 TextArea({text: 'lineHeight unset'}) 1201 .border({ width: 1 }).padding(10).margin(5) 1202 TextArea({text: 'lineHeight 15'}) 1203 .border({ width: 1 }).padding(10).margin(5).lineHeight(15) 1204 TextArea({text: 'lineHeight 30'}) 1205 .border({ width: 1 }).padding(10).margin(5).lineHeight(30) 1206 1207 Text('letterSpacing').fontSize(9).fontColor(0xCCCCCC) 1208 TextArea({text: 'letterSpacing 0'}) 1209 .border({ width: 1 }).padding(5).margin(5).letterSpacing(0) 1210 TextArea({text: 'letterSpacing 3'}) 1211 .border({ width: 1 }).padding(5).margin(5).letterSpacing(3) 1212 TextArea({text: 'letterSpacing -1'}) 1213 .border({ width: 1 }).padding(5).margin(5).letterSpacing(-1) 1214 1215 Text('decoration').fontSize(9).fontColor(0xCCCCCC) 1216 TextArea({text: 'LineThrough, Red\nsecond line'}) 1217 .border({ width: 1 }).padding(5).margin(5) 1218 .decoration({type: TextDecorationType.LineThrough, color: Color.Red}) 1219 TextArea({text: 'Overline, Red, DOTTED\nsecond line'}) 1220 .border({ width: 1 }).padding(5).margin(5) 1221 .decoration({type: TextDecorationType.Overline, color: Color.Red, style: TextDecorationStyle.DOTTED}) 1222 TextArea({text: 'Underline, Red, WAVY\nsecond line'}) 1223 .border({ width: 1 }).padding(5).margin(5) 1224 .decoration({type: TextDecorationType.Underline, color: Color.Red, style: TextDecorationStyle.WAVY}) 1225 }.height('90%') 1226 } 1227 .width('90%') 1228 .margin(10) 1229 } 1230} 1231``` 1232 1233 1234 1235### Example 8 1236This example shows how to set the **fontFeature** attribute, with a comparison between the ss01-enabled and ss01-disabled effects. 1237 1238```ts 1239@Entry 1240@Component 1241struct textArea { 1242 @State text1: string = 'This is ss01 on: 0123456789' 1243 @State text2: string = 'This is ss01 off: 0123456789' 1244 1245 build() { 1246 Column(){ 1247 TextArea({text: this.text1}) 1248 .fontSize(20) 1249 .margin({top:200}) 1250 .fontFeature("\"ss01\" on") 1251 TextArea({text : this.text2}) 1252 .margin({top:10}) 1253 .fontSize(20) 1254 .fontFeature("\"ss01\" off") 1255 } 1256 .width("90%") 1257 .margin("5%") 1258 } 1259} 1260``` 1261 1262 1263### Example 9 1264 1265This example shows how to support custom keyboard avoidance. 1266 1267```ts 1268@Entry 1269@Component 1270struct TextAreaExample { 1271 controller: TextAreaController = new TextAreaController() 1272 @State inputValue: string = "" 1273 @State height1:string|number = '80%' 1274 @State height2:number = 100 1275 @State supportAvoidance:boolean = true; 1276 1277 // Create a custom keyboard component. 1278 @Builder CustomKeyboardBuilder() { 1279 Column() { 1280 Row(){ 1281 Button('x').onClick(() => { 1282 // Disable the custom keyboard. 1283 this.controller.stopEditing() 1284 }).margin(10) 1285 } 1286 Grid() { 1287 ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item: number | string) => { 1288 GridItem() { 1289 Button(item + "") 1290 .width(110).onClick(() => { 1291 this.inputValue += item 1292 }) 1293 } 1294 }) 1295 }.maxCount(3).columnsGap(10).rowsGap(10).padding(5) 1296 }.backgroundColor(Color.Gray) 1297 } 1298 1299 build() { 1300 Column() { 1301 Row(){ 1302 Button("20%") 1303 .fontSize(24) 1304 .onClick(()=>{ 1305 this.height1 = "20%" 1306 }) 1307 Button("80%") 1308 .fontSize(24) 1309 .margin({left:20}) 1310 .onClick(()=>{ 1311 this.height1 = "80%" 1312 }) 1313 } 1314 .justifyContent(FlexAlign.Center) 1315 .alignItems(VerticalAlign.Bottom) 1316 .height(this.height1) 1317 .width("100%") 1318 .padding({bottom:50}) 1319 TextArea({ controller: this.controller, text: this.inputValue}) 1320 .height(100) 1321 // Bind the custom keyboard. 1322 .customKeyboard(this.CustomKeyboardBuilder(),{ supportAvoidance: this.supportAvoidance }).margin(10).border({ width: 1 }) 1323 // .height(200) 1324 } 1325 } 1326} 1327``` 1328 1329 1330### Example 10 1331 1332This example shows how to set **minFontSize**, **maxFontSize**, and **heightAdaptivePolicy**. 1333 1334```ts 1335// xxx.ets 1336@Entry 1337@Component 1338struct TextAreaExample { 1339 build() { 1340 Row() { 1341 Column() { 1342 Text('heightAdaptivePolicy').fontSize(9).fontColor(0xCCCCCC) 1343 TextArea({text: 'This is the text with the height adaptive policy set'}) 1344 .width('80%').height(90).borderWidth(1).margin(1) 1345 .minFontSize(4) 1346 .maxFontSize(40) 1347 .maxLines(3) 1348 .heightAdaptivePolicy(TextHeightAdaptivePolicy.MAX_LINES_FIRST) 1349 TextArea({text: 'This is the text with the height adaptive policy set'}) 1350 .width('80%').height(90).borderWidth(1).margin(1) 1351 .minFontSize(4) 1352 .maxFontSize(40) 1353 .maxLines(3) 1354 .heightAdaptivePolicy(TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST) 1355 TextArea({text: 'This is the text with the height adaptive policy set'}) 1356 .width('80%').height(90).borderWidth(1).margin(1) 1357 .minFontSize(4) 1358 .maxFontSize(40) 1359 .maxLines(3) 1360 .heightAdaptivePolicy(TextHeightAdaptivePolicy.LAYOUT_CONSTRAINT_FIRST) 1361 }.height('90%') 1362 } 1363 .width('90%') 1364 .margin(10) 1365 } 1366} 1367``` 1368 1369 1370 1371### Example 11 1372 1373This example shows how to set the **lineSpacing** attribute, with a comparison of line spacing effects. 1374 1375```ts 1376import { LengthMetrics } from '@ohos.arkui.node' 1377 1378@Entry 1379@Component 1380struct LineSpacingExample { 1381 build() { 1382 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { 1383 Text('TextArea lineSpacing.').fontSize(9).fontColor(0xCCCCCC) 1384 TextArea({ placeholder: 'This is the TextArea with no lineSpacing set.' }) 1385 .fontSize(12) 1386 TextArea({ placeholder: 'This is the TextArea with lineSpacing set to 20_px.' }) 1387 .fontSize(12) 1388 .lineSpacing(LengthMetrics.px(20)) 1389 TextArea({ placeholder: 'This is the TextArea with lineSpacing set to 20_vp.' }) 1390 .fontSize(12) 1391 .lineSpacing(LengthMetrics.vp(20)) 1392 TextArea({ placeholder: 'This is the TextArea with lineSpacing set to 20_fp.' }) 1393 .fontSize(12) 1394 .lineSpacing(LengthMetrics.fp(20)) 1395 TextArea({ placeholder: 'This is the TextArea with lineSpacing set to 20_lpx.' }) 1396 .fontSize(12) 1397 .lineSpacing(LengthMetrics.lpx(20)) 1398 TextArea({ placeholder: 'This is the TextArea with lineSpacing set to 100%.' }) 1399 .fontSize(12) 1400 .lineSpacing(LengthMetrics.percent(1)) 1401 }.height(600).width(350).padding({ left: 35, right: 35, top: 35 }) 1402 } 1403} 1404``` 1405 1406 1407 1408### Example 12 1409 1410This example shows how to use autofill. 1411 1412```ts 1413// xxx.ets 1414@Entry 1415@Component 1416struct TextAreaExample { 1417 @State text: string = '' 1418 1419 build() { 1420 Column() { 1421 // Email address autofill. 1422 TextArea({ placeholder: 'input your email...' }) 1423 .width('95%') 1424 .height(40) 1425 .margin(20) 1426 .contentType(ContentType.EMAIL_ADDRESS) 1427 .enableAutoFill(true) 1428 .maxLength(20) 1429 // Full street address autofill. 1430 TextArea({ placeholder: 'input your street address...' }) 1431 .width('95%') 1432 .height(40) 1433 .margin(20) 1434 .contentType(ContentType.FULL_STREET_ADDRESS) 1435 .enableAutoFill(true) 1436 .maxLength(20) 1437 }.width('100%').height('100%').backgroundColor('#F1F3F5') 1438 } 1439} 1440``` 1441 1442 1443 1444### Example 13 1445 1446This example shows how to set the **lineBreakStrategy** attribute, with a comparison of line break rules. 1447 1448```ts 1449@Entry 1450@Component 1451struct TextExample1 { 1452 @State message1: string = "They can be classified as built-in components–those directly provided by the ArkUI framework and custom components – those defined by developers" + 1453 "The built-in components include buttons radio buttonsprogress indicators and text You can set the rendering effectof thesecomponents in method chaining mode," + 1454 "page components are divided into independent UI units to implementindependent creation development and reuse of different units on pages making pages more engineering-oriented."; 1455 1456 build() { 1457 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) { 1458 Text('LineBreakStrategy.GREEDY').fontSize(9).fontColor(0xCCCCCC).width('90%').padding(10) 1459 TextArea({text: this.message1}) 1460 .fontSize(12) 1461 .border({ width: 1 }) 1462 .padding(10) 1463 .width('100%') 1464 .lineBreakStrategy(LineBreakStrategy.GREEDY) 1465 Text('LineBreakStrategy.HIGH_QUALITY').fontSize(9).fontColor(0xCCCCCC).width('90%').padding(10) 1466 TextArea({text: this.message1}) 1467 .fontSize(12) 1468 .border({ width: 1 }) 1469 .padding(10) 1470 .width('100%') 1471 .lineBreakStrategy(LineBreakStrategy.HIGH_QUALITY) 1472 Text('LineBreakStrategy.BALANCED').fontSize(9).fontColor(0xCCCCCC).width('90%').padding(10) 1473 TextArea({text: this.message1}) 1474 .fontSize(12) 1475 .border({ width: 1 }) 1476 .padding(10) 1477 .width('100%') 1478 .lineBreakStrategy(LineBreakStrategy.BALANCED) 1479 }.height(700).width(370).padding({ left: 35, right: 35, top: 35 }) 1480 } 1481} 1482``` 1483 1484 1485 1486### Example 14 1487 1488This example shows how to use the insert and delete callbacks. 1489 1490```ts 1491// xxx.ets 1492@Entry 1493@Component 1494struct TextAreaExample { 1495 @State insertValue: string = "" 1496 @State deleteValue: string = "" 1497 @State insertOffset: number = 0 1498 @State deleteOffset: number = 0 1499 @State deleteDirection: number = 0 1500 1501 build() { 1502 Row() { 1503 Column() { 1504 TextArea({ text: "Insert callbacks" }) 1505 .width(300) 1506 .height(60) 1507 .onWillInsert((info: InsertValue) => { 1508 this.insertValue = info.insertValue 1509 return true; 1510 }) 1511 .onDidInsert((info: InsertValue) => { 1512 this.insertOffset = info.insertOffset 1513 }) 1514 1515 Text("insertValue:" + this.insertValue + " insertOffset:" + this.insertOffset).height(30) 1516 1517 TextArea({ text: "Delete callbacks" }) 1518 .width(300) 1519 .height(60) 1520 .onWillDelete((info: DeleteValue) => { 1521 this.deleteValue = info.deleteValue 1522 info.direction 1523 return true; 1524 }) 1525 .onDidDelete((info: DeleteValue) => { 1526 this.deleteOffset = info.deleteOffset 1527 this.deleteDirection = info.direction 1528 }) 1529 1530 Text("deleteValue:" + this.deleteValue + " deleteOffset:" + this.deleteOffset).height(30) 1531 Text("deleteDirection:" + (this.deleteDirection == 0 ? "BACKWARD" : "FORWARD")).height(30) 1532 1533 }.width('100%') 1534 } 1535 .height('100%') 1536 } 1537} 1538``` 1539 1540 1541 1542### Example 15 1543 1544This example shows how to set **editMenuOptions**. 1545 1546```ts 1547// xxx.ets 1548@Entry 1549@Component 1550struct TextAreaExample { 1551 @State text: string = 'TextArea editMenuOptions' 1552 1553 onCreateMenu(menuItems: Array<TextMenuItem>) { 1554 menuItems.forEach((value, index) => { 1555 value.icon = $r('app.media.startIcon') 1556 if (value.id.equals(TextMenuItemId.COPY)) { 1557 value.content = "Copy_Custom" 1558 } 1559 if (value.id.equals(TextMenuItemId.SELECT_ALL)) { 1560 value.content = "Select All_Custom" 1561 } 1562 }) 1563 let item1: TextMenuItem = { 1564 content: 'Custom 1', 1565 icon: $r('app.media.startIcon'), 1566 id: TextMenuItemId.of('Custom 1'), 1567 } 1568 let item2: TextMenuItem = { 1569 content: 'Custom 2', 1570 id: TextMenuItemId.of('Custom 2'), 1571 icon: $r('app.media.startIcon'), 1572 } 1573 menuItems.push(item1) 1574 menuItems.unshift(item2) 1575 return menuItems 1576 } 1577 1578 build() { 1579 Column() { 1580 TextArea({ text: this.text }) 1581 .width('95%') 1582 .height(56) 1583 .editMenuOptions({ 1584 onCreateMenu: this.onCreateMenu, onMenuItemClick: (menuItem: TextMenuItem, textRange: TextRange) => { 1585 if (menuItem.id.equals(TextMenuItemId.of("custom2"))) { 1586 console.log("Intercept id: custom2 start:" + textRange.start + "; end:" + textRange.end) 1587 return true; 1588 } 1589 if (menuItem.id.equals(TextMenuItemId.COPY)) { 1590 console.log("Intercepted COPY start:" + textRange.start + "; end:" + textRange.end) 1591 return true; 1592 } 1593 if (menuItem.id.equals(TextMenuItemId.SELECT_ALL)) { 1594 console.log("Did not intercept SELECT_ALL start:" + textRange.start + "; end:" + textRange.end) 1595 return false; 1596 } 1597 return false; 1598 } 1599 }) 1600 .margin({ top: 100 }) 1601 } 1602 .width("90%") 1603 .margin("5%") 1604 } 1605} 1606``` 1607 1608 1609
