1# input 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 **\<input>** component provides an interactive interface to receive user input. It can be a radio button, check box, button, single-line text box, and more. 8 9## Required Permissions 10 11None 12 13 14## Child Components 15 16Not supported 17 18 19## Attributes 20 21In addition to the [universal attributes](js-components-common-attributes.md), the following attributes are supported. 22 23| Name | Type | Default Value | Mandatory | Description | 24| -------------------------------- | ----------------------- | --------- | ---- | ---------------------------------------- | 25| type | string | text<br>| No | Type of the input component. Available values include **text**, **email**, **date**, **time**, **number**, **password**, **button**, **checkbox**, and **radio**.<br>The **text**, **email**, **date**, **time**, **number**, and **password** types can be dynamically switched and modified.<br>The **button**, **checkbox**, and **radio** types cannot be dynamically modified. <br>- **button**: a button that can be clicked.<br>- **checkbox**: a check box.<br>- **radio**: a radio button that allows users to select one from multiple others with the same name.<br>- **text**: a single-line text field.<br>- **email**: a field used for an email address.<br>- **date**: date component, including the year, month, and day, but excluding time.<br>- **time**: time component, without the time zone.<br>- **number**: field for entering digits.<br>- **password**: password field, in which characters will be shielded.| 26| checked | boolean | false | No | Whether the **\<input>** component is selected. This attribute is valid only when **type** is set to **checkbox** or **radio**. | 27| name | string | - | No | Name of the **\<input>** component.<br>This attribute is mandatory when **type** is set to **radio**. | 28| value | string | - | No | Value of the **\<input>** component. When **type** is **radio**, this attribute is mandatory and the value must be unique for radio buttons with the same name.| 29| placeholder | string | - | No | Content of the hint text. This attribute is available only when the component type is set to **text** \|email\|date\|time\|number\|**password**.| 30| maxlength | number | - | No | Maximum number of characters that can be entered in the input box. The empty value indicates no limit. | 31| enterkeytype | string | default | No | Type of the **Enter** key on the soft keyboard. The value cannot be dynamically updated.<br>Available values include:<br>- default<br>- next<br>- go<br>- done<br>- send<br>- search<br>Except for the **next** type, clicking the Enter key hides the soft keyboard.| 32| headericon | string | - | No | Icon resource path before text input. This icon does not support click events and is unavailable for **button**, **checkbox**, and **radio** types. The supported icon image formats are JPG, PNG, and SVG.| 33| showcounter<sup>5+</sup> | boolean | false | No | Whether to display the character counter for an input box. This attribute takes effect only when **maxlength** is set. | 34| menuoptions<sup>5+</sup> | Array<MenuOption> | - | No | Menu options displayed after users click the **More** button. | 35| autofocus<sup>6+</sup> | boolean | false | No | Whether to automatically obtain focus.<br>This attribute setting does not take effect on the application home page. You can enable a text box on the home page to automatically obtain focus, by delaying the **focus** method call (for about 100–500 ms) in **onActive**.| 36| selectedstart<sup>6+</sup> | number | -1 | No | Start position for text selection. | 37| selectedend<sup>6+</sup> | number | -1 | No | End position for text selection. | 38| softkeyboardenabled<sup>6+</sup> | boolean | true | No | Whether to display the soft keyboard during editing. | 39| showpasswordicon<sup>6+</sup> | boolean | true | No | Whether to display the icon at the end of the password text box. This attribute is available only when **type** is set to **password**. | 40 41**Table 1** MenuOption<sup>5+</sup> 42 43| Name | Type | Description | 44| ------- | ------ | ----------- | 45| icon | string | Path of the icon for a menu option.| 46| content | string | Text content of a menu option.| 47 48 49## Styles 50 51In addition to the [universal styles](js-components-common-styles.md), the following styles are supported. 52 53| Name | Type | Default Value | Mandatory | Description | 54| ------------------------ | -------------------------- | ---------- | ---- | ---------------------------------------- | 55| color | <color> | \#e6000000 | No | Font color of the single-line text box or button. | 56| font-size | <length> | 16px | No | Font size of the single-line text box or button. | 57| 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.| 58| placeholder-color | <color> | \#99000000 | No | Color of the hint text in the single-line text box. This attribute is available only when the component type is set to **text**, **email**, **date**, **time**, **number**, or **password**. | 59| font-weight | number \| string | normal | No | Font weight of the single-line text box or button. For details, see **font-weight** of the [**\<text>**](js-components-basic-text.md) component. | 60| caret-color<sup>6+</sup> | <color> | - | No | Color of the caret. | 61 62 63## Events 64 65In addition to the [universal events](js-components-common-events.md), the following events are supported. 66 67- When **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**, the following events are supported. 68 69 | Name | Parameter | Description | 70 | ------------------------- | ---------------------------------------- | ---------------------------------------- | 71 | change | {<br> value: inputValue<br> } | Triggered when the content entered in the input box changes. The most recent content entered by the user is returned.<br>If you change the **value** attribute directly, this event will not be triggered.| 72 | enterkeyclick | {<br> value: enterKey<br> } | Triggered when the **Enter** key on the soft keyboard is clicked. The type of the **Enter** key is returned, which is of the number type. Available values are as follows:<br>- **2**: returned if **enterkeytype** is **go**.<br>- **3**: returned if **enterkeytype** is **search**.<br>- **4**: returned if **enterkeytype** is **send**.<br>- **5**: returned if **enterkeytype** is **next**.<br>- **6**: returned if **enterkeytype** is **default**, **done**, or is not set.| 73 | translate<sup>5+</sup> | {<br> value: selectedText<br> } | Triggered when users click the translate button in the menu displayed after they select a text segment. The selected text content is returned.| 74 | share<sup>5+</sup> | {<br> value: selectedText<br> } | Triggered when users click the share button in the menu displayed after they select a text segment. The selected text content is returned.| 75 | search<sup>5+</sup> | {<br> value: selectedText<br> } | Triggered when users click the search button in the menu displayed after they select a text segment. The selected text content is returned.| 76 | optionselect<sup>5+</sup> | {<br> index: optionIndex,<br> value: selectedText<br> } | 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.| 77 | selectchange<sup>6+</sup> | {<br>start: number,<br>end: number<br> } | Triggered when the text selection changes. | 78 79- When **type** is set to **checkbox** or **radio**, the following events are supported. 80 81 | Name | Parameter | Description | 82 | ------ | ---------------------------------------- | ---------------------------------------- | 83 | change | {<br> checked:true \| false <br>} | Triggered when the checked status of the **checkbox** or **radio** button changes.| 84 85## Methods 86 87In addition to the [universal methods](js-components-common-methods.md), the following methods are supported. 88 89| Name | Parameter | Description | 90| ------------------- | ---------------------------------------- | ---------------------------------------- | 91| focus | {<br> focus: true\|false<br> }:<br>If **focus** is not passed, the default value **true** is used. | Obtains or loses focus. When **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**, the input method can be displayed or collapsed. | 92| showError | {<br> error: string <br>} | Displays the error message. This method is available when **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**. | 93| delete<sup>6+</sup> | - | Deletes text based on the current caret position when **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**; deletes the last character and displays the caret if the current input component does not have a caret. | 94 95## Example 96 971. Single-line text box 98 ```html 99 <!-- xxx.hml --> 100 <div class="content"> 101 <input id="input" class="input" type="text" value="" maxlength="20" enterkeytype="send" 102 headericon="/common/search.svg" placeholder="Please input text" onchange="change" 103 onenterkeyclick="enterkeyClick"> 104 </input> 105 <input class="button" type="button" value="Submit" onclick="buttonClick" style="color: blue"></input> 106 </div> 107 ``` 108 109 ```css 110 /* xxx.css */ 111 .content { 112 width: 100%; 113 flex-direction: column; 114 align-items: center; 115 } 116 .input { 117 width: 60%; 118 placeholder-color: gray; 119 } 120 .button { 121 width: 60%; 122 background-color: gray; 123 margin-top: 20px; 124 } 125 ``` 126 127 ```js 128 // xxx.js 129 import promptAction from '@ohos.promptAction' 130 export default { 131 change(e){ 132 promptAction.showToast({ 133 message: "value: " + e.value, 134 duration: 3000, 135 }); 136 }, 137 enterkeyClick(e){ 138 promptAction.showToast({ 139 message: "enterkey clicked", 140 duration: 3000, 141 }); 142 }, 143 buttonClick(e){ 144 this.$element("input").showError({ 145 error: 'error text' 146 }); 147 }, 148 } 149 ``` 150 151  152 1532. Common button 154 ```html 155 <!-- xxx.hml --> 156 <div class="div-button"> 157 <input class="button" type="button" value="Input-Button"></input> 158 </div> 159 ``` 160 161 ```css 162 /* xxx.css */ 163 .div-button { 164 flex-direction: column; 165 align-items: center; 166 } 167 .button { 168 margin-top: 30px; 169 width: 280px; 170 } 171 ``` 172 173  174 1753. Check box 176 ```html 177 <!-- xxx.hml --> 178 <div class="content"> 179 <input onchange="checkboxOnChange" checked="true" type="checkbox"></input> 180 </div> 181 ``` 182 183 ```css 184 /* xxx.css */ 185 .content{ 186 width: 100%; 187 height: 200px; 188 align-items: center; 189 justify-content: center; 190 } 191 ``` 192 193 ```js 194 // xxx.js 195 import promptAction from '@ohos.promptAction' 196 export default { 197 checkboxOnChange(e) { 198 promptAction.showToast({ 199 message:'checked: ' + e.checked, 200 duration: 3000, 201 }); 202 } 203 } 204 ``` 205 206  207 2084. Radio button 209 ```html 210 <!-- xxx.hml --> 211 <div class="content"> 212 <input type="radio" checked='true' name="radioSample" value="radio1" onchange="onRadioChange('radio1')"></input> 213 <input type="radio" checked='false' name="radioSample" value="radio2" onchange="onRadioChange('radio2')"></input> 214 <input type="radio" checked='false' name="radioSample" value="radio3" onchange="onRadioChange('radio3')"></input> 215 </div> 216 ``` 217 218 ```css 219 /* xxx.css */ 220 .content{ 221 width: 100%; 222 height: 200px; 223 justify-content: center; 224 align-items: center; 225 } 226 ``` 227 228 ```js 229 // xxx.js 230 import promptAction from '@ohos.promptAction' 231 export default { 232 onRadioChange(inputValue, e) { 233 if (inputValue === e.value) { 234 promptAction.showToast({ 235 message: 'The chosen radio is ' + e.value, 236 duration: 3000, 237 }); 238 } 239 } 240 } 241 ``` 242 243  244
