1# textarea 2 3The **\<textarea>** component provides a text box to receive multi-line text input. 4 5## Required Permissions 6 7None 8 9## Child Components 10 11Not supported 12 13## Attributes 14 15In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. 16 17 18 19| Name | Type | Default Value | Mandatory | Description | 20| --------------------- | ----------------------------------------------------- | ------------- | --------- | ------------------------------------------------------------ | 21| placeholder | string | - | No | Content of the hint text. | 22| maxlength | number | - | No | Maximum number of characters that can be entered in the multi-line text box. | 23| headericon | string | - | No | Icon displayed before text input. This icon does not support click events. The supported icon formats are JPG, PNG, and SVG. | 24| 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. | 25| value5+ | string | - | No | Content in a multi-line text box. | 26| showcounter5+ | boolean | false | No | Whether to display the character counter for the text box. This attribute takes effect only when **maxlength** is set. | 27| menuoptions5+ | Array\<[MenuOption](js-components-basic-textarea.md)> | - | No | Menu options displayed after users click the **More** button in the pop menu. | 28| autofocus6+ | boolean | false | No | Whether to automatically obtain the focus. | 29| selectedstart6+ | number | -1 | No | Start position for text selection. | 30| selectedend6+ | number | -1 | No | End position for text selection. | 31| softkeyboardenabled6+ | boolean | true | No | Whether to display the soft keyboard during editing. | 32 33**Table 1** MenuOption5+ 34 35 36 37| Name | Type | Description | 38| ------- | ------ | ----------------------------------- | 39| icon | string | Path of the icon for a menu option. | 40| content | string | Text content in a menu option. | 41 42## Styles 43 44In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. 45 46 47 48| Name | Type | Default Value | Mandatory | Description | 49| ----------------- | ---------------- | ------------- | --------- | ------------------------------------------------------------ | 50| color | \<color> | #e6000000 | No | Text color of the multi-line text box. | 51| font-size | \<length> | 16px | No | Font size of the multi-line text box. | 52| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.<br/>NOTE:<br/>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart. | 53| 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 **text**, **email**, **date**, **time**, **number**, or **password**. | 54| font-weight | number \| string | normal | No | Font weight. For details, see [font-weight](js-components-basic-text.md) of the **text** component. | 55| 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 that exists in the system or the font specified by [Custom Font Styles](js-components-common-customizing-font.md) in the family is selected as the font for the text. | 56| caret-color6+ | \<color> | - | No | Color of the input cursor. | 57 58## Events 59 60In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. 61 62 63 64| Name | Parameter | Description | 65| -------------- | ------------------------------------------------------- | ------------------------------------------------------------ | 66| 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.NOTE:If you change the **value** attribute directly, this event will not be triggered. 5+ | 67| translate5+ | { value: selectedText } | Triggered when users click the translate button in the pop menu displayed after they select a text segment. The selected text content is returned. | 68| share5+ | { value: selectedText } | Triggered when users click the share button in the pop menu displayed after they select a text segment. The selected text content is returned. | 69| search5+ | { value: selectedText } | Triggered when users click the search button in the pop menu displayed after they select a text segment. The selected text content is returned. | 70| optionselect5+ | { index:optionIndex, value: selectedText } | Triggered when users click a menu option in the pop 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. | 71| selectchange6+ | { start: number, end: number } | Triggered when the text selection changes. | 72 73## Method 74 75Methods in [Universal Methods](js-components-common-methods.md) are supported. 76 77## Example Code 78 79``` 80<!-- xxx.hml --> 81<textarea id="textarea" class="textarea" extend="true" maxlength="20" 82 headericon="/common/navigation_menu1_icon.svg" placeholder="Please input text" 83 onchange="change"> 84</textarea> 85/* xxx.css */ 86.textarea { 87 placeholder-color: gray; 88} 89// xxx.js 90import prompt from '@system.prompt'; 91export default { 92change(e){ 93 prompt.showToast({ 94 message: 'value: ' + e.text + ', lines: ' + e.lines + ', height: ' + e.height, 95 duration: 3000, 96 }); 97} 98} 99``` 100 101
