1# textarea 2 3> **NOTE** 4> 5> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. 6 7The **\<textarea>** component provides a text box to receive multi-line text input. 8 9 10## Required Permissions 11 12None 13 14 15## Child Components 16 17Not supported 18 19 20## Attributes 21 22In addition to the [universal attributes](js-components-common-attributes.md), the following attributes are supported. 23 24| Name | Type | Default Value| Mandatory| Description | 25| -------------------------------- | ----------------------- | ------ | ---- | ------------------------------------------------------------ | 26| placeholder | string | - | No | Content of the hint text. | 27| maxlength | number | - | No | Maximum number of characters that can be entered in the multi-line text box. | 28| headericon | string | - | No | Icon displayed before text input. This icon does not support click events. The supported icon formats are JPG, PNG, and SVG.| 29| extend | boolean | false | No | Whether a text box can be extended. If the value of this attribute is set to **true**, the height of the text box can adapt to the text.| 30| value<sup>5+</sup> | string | - | No | Content in a multi-line text box. | 31| showcounter<sup>5+</sup> | boolean | false | No | Whether to display the character counter for the text box. This attribute takes effect only when **maxlength** is set. | 32| menuoptions<sup>5+</sup> | Array<MenuOption> | - | No | Menu options displayed after users click the **More** button. | 33| autofocus<sup>6+</sup> | boolean | false | No | Whether to automatically obtain focus. | 34| selectedstart<sup>6+</sup> | number | -1 | No | Start position for text selection. | 35| selectedend<sup>6+</sup> | number | -1 | No | End position for text selection. | 36| softkeyboardenabled<sup>6+</sup> | boolean | true | No | Whether to display the soft keyboard during editing. | 37 38**Table 1** MenuOption<sup>5+</sup> 39 40| Name | Type | Description | 41| ------- | ------ | ----------- | 42| icon | string | Path of the icon for a menu option.| 43| content | string | Text content of a menu option.| 44 45 46## Styles 47 48In addition to the [universal styles](js-components-common-styles.md), the following styles are supported. 49 50| Name | Type | Default Value | Mandatory | Description | 51| ------------------------ | -------------------------- | ---------- | ---- | ---------------------------------------- | 52| color | <color> | \#e6000000 | No | Text color of the multi-line text box. | 53| font-size | <length> | 16px | No | Font size of the multi-line text box. | 54| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.<br>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.| 55| placeholder-color | <color> | \#99000000 | No | Color of the hint text in the multi-line text box. This attribute is available when the component type is set to one of the following: text\|email\|date\|time\|number\|password.| 56| font-weight | number \| string | normal | No | Font weight. For details, see **font-weight** of the [**\<text>**](js-components-basic-text.md#styles) component.| 57| font-family | string | sans-serif | No | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](js-components-common-customizing-font.md) is used for the text.| 58| caret-color<sup>6+</sup> | <color> | - | No | Color of the caret. | 59 60 61## Events 62 63In addition to the [universal events](js-components-common-events.md), the following events are supported. 64 65| Name | Parameter | Description | 66| ------------------------- | ---------------------------------------- | ---------------------------------------- | 67| change | { text: newText, lines: textLines, height: textHeight } | Triggered when the input content changes. The input content, number of rows, and row height are obtained through the parameters.<br>Since API version 5, if you change the value attribute directly, this event will not be triggered.| 68| translate<sup>5+</sup> | { value: selectedText } | Triggered when users click the translate button in the menu displayed after they select a text segment. The selected text content is returned.| 69| share<sup>5+</sup> | { value: selectedText } | Triggered when users click the share button in the menu displayed after they select a text segment. The selected text content is returned.| 70| search<sup>5+</sup> | { value: selectedText } | Triggered when users click the search button in the menu displayed after they select a text segment. The selected text content is returned.| 71| optionselect<sup>5+</sup> | { index:optionIndex, value: selectedText } | Triggered when users click a menu option in the menu displayed after they select a text segment. This event is valid only when the **menuoptions** attribute is set. The option index and selected text content are returned.| 72| selectchange<sup>6+</sup> | { start: number, end: number }| Triggered when the text selection changes. | 73 74 75## Methods 76 77The [universal methods](js-components-common-methods.md) are supported. 78 79 80## Example 81 82```html 83<!-- xxx.hml --> 84<textarea id="textarea" class="textarea" extend="true" maxlength="20" 85 headericon="/common/navigation_menu1_icon.svg" placeholder="Please input text" 86 onchange="change"> 87</textarea> 88``` 89 90```css 91/* xxx.css */ 92.textarea { 93 placeholder-color: gray; 94} 95``` 96 97```js 98// xxx.js 99import promptAction from '@ohos.promptAction'; 100export default { 101change(e){ 102 promptAction.showToast({ 103 message: 'value: ' + e.text + ', lines: ' + e.lines + ', height: ' + e.height, 104 duration: 3000, 105 }); 106} 107} 108``` 109 110 111
