1# input 2 3> **说明：** 4> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 5 6交互式组件，包括单选框，多选框，按钮和单行文本输入框。 7 8## 权限列表 9 10无 11 12 13## 子组件 14 15不支持。 16 17 18## 属性 19 20除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： 21 22| 名称 | 类型 | 默认值 | 必填 | 描述 | 23| -------------------------------- | ----------------------- | --------- | ---- | ---------------------------------------- | 24| type | string | text<br/> | 否 | input组件类型，可选值为text，email，date，time，number，password，button，checkbox，radio。<br/>其中text，email，date，time，number，password这六种类型之间支持动态切换修改。<br/>button，checkbox，radio不支持动态修改。可选值定义如下：<br/>- button：定义可点击的按钮；<br/>- checkbox：定义多选框；<br/>- radio：定义单选按钮，允许在多个拥有相同name值的选项中选中其中一个；<br/>- text：定义一个单行的文本字段；<br/>- email：定义用于e-mail地址的字段；<br/>- date：定义 date 控件（包括年、月、日，不包括时间）；<br/>- time：定义用于输入时间的控件（不带时区）；<br/>- number：定义用于输入数字的字段；<br/>- password：定义密码字段（字段中的字符会被遮蔽）。 | 25| checked | boolean | false | 否 | 当前组件是否选中，仅type为checkbox和radio生效。 | 26| name | string | - | 否 | input组件的名称。<br>type为radio时，name为必填。 | 27| value | string | - | 否 | input组件的value值，当类型为radio时必填且相同name值的选项该值唯一。 | 28| placeholder | string | - | 否 | 设置提示文本的内容，仅在type为text\|email\|date\|time\|number\|password时生效。 | 29| maxlength | number | - | 否 | 输入框可输入的最多字符数量，不填表示不限制输入框中字符数量。 | 30| enterkeytype | string | default | 否 | 不支持动态修改。<br/>设置软键盘Enter按钮的类型，可选值为：<br/>- default：默认<br/>- next：下一项<br/>- go：前往<br/>- done：完成<br/>- send：发送<br/>- search：搜索<br/>除“next”外，点击后会自动收起软键盘。 | 31| headericon | string | - | 否 | 在文本输入前的图标资源路径，该图标不支持点击事件（button，checkbox和radio不生效），图标格式为jpg，png和svg。 | 32| showcounter<sup>5+</sup> | boolean | false | 否 | 文本输入框是否显示计数下标，需要配合maxlength一起使用。 | 33| menuoptions<sup>5+</sup> | Array<MenuOption> | - | 否 | 设置文本选择弹框点击更多按钮之后显示的菜单项。 | 34| autofocus<sup>6+</sup> | boolean | false | 否 | 是否自动获焦。<br/>应用首页中设置不生效，可在onActive中延迟（100-500ms左右）调用focus方法实现输入框在首页中自动获焦。 | 35| selectedstart<sup>6+</sup> | number | -1 | 否 | 开始选择文本时初始选择位置。 | 36| selectedend<sup>6+</sup> | number | -1 | 否 | 开始选择文本时结尾选择位置。 | 37| softkeyboardenabled<sup>6+</sup> | boolean | true | 否 | 编辑时是否弹出系统软键盘。 | 38| showpasswordicon<sup>6+</sup> | boolean | true | 否 | 是否显示密码框末尾的图标（仅type为password时生效）。 | 39 40**表1** MenuOption<sup>5+</sup> 41 42| 名称 | 类型 | 描述 | 43| ------- | ------ | ----------- | 44| icon | string | 菜单选项中的图标路径。 | 45| content | string | 菜单选项中的文本内容。 | 46 47 48## 样式 49 50除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： 51 52| 名称 | 类型 | 默认值 | 必填 | 描述 | 53| ------------------------ | -------------------------- | ---------- | ---- | ---------------------------------------- | 54| color | <color> | \#e6000000 | 否 | 单行输入框或者按钮的文本颜色。 | 55| font-size | <length> | 16px | 否 | 单行输入框或者按钮的文本尺寸。 | 56| allow-scale | boolean | true | 否 | 单行输入框或者按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | 57| placeholder-color | <color> | \#99000000 | 否 | 单行输入框的提示文本的颜色，type为text\|email\|date\|time\|number\|password时生效。 | 58| font-weight | number \| string | normal | 否 | 单行输入框或者按钮的字体粗细，见[text组件font-weight的样式属性](js-components-basic-text.md#样式)。 | 59| caret-color<sup>6+</sup> | <color> | - | 否 | 设置输入光标的颜色。 | 60 61 62## 事件 63 64除支持[通用事件](js-components-common-events.md)外，还支持如下事件： 65 66- 当input类型为text、email、date、time、number、password时，支持如下事件： 67 68 | 名称 | 参数 | 描述 | 69 | ------------------------- | ---------------------------------------- | ---------------------------------------- | 70 | change | {<br> value: inputValue<br> } | 输入框输入内容发生变化时触发该事件，返回用户当前输入值。<br/>改变value属性值不会触发该回调。 | 71 | enterkeyclick | {<br> value: enterKey<br> } | 软键盘enter键点击后触发该事件，返回enter按钮的类型，enterKey类型为number，可选值为：<br/>- 2：设置enterkeytype属性为go时生效。<br/>- 3：设置enterkeytype属性为search时生效。<br/>- 4：设置enterkeytype属性为send时生效。<br/>- 5：设置enterkeytype属性为next时生效。<br/>- 6：不设置enterkeytype或者设置enterkeytype属性为default、done时生效。 | 72 | translate<sup>5+</sup> | {<br> value: selectedText<br> } | 设置此事件后，进行文本选择操作后文本选择弹窗会出现翻译按钮，点击翻译按钮之后，触发该回调，返回选中的文本内容。 | 73 | share<sup>5+</sup> | {<br> value: selectedText<br> } | 设置此事件后，进行文本选择操作后文本选择弹窗会出现分享按钮，点击分享按钮之后，触发该回调，返回选中的文本内容。 | 74 | search<sup>5+</sup> | {<br> value: selectedText<br> } | 设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。 | 75 | optionselect<sup>5+</sup> | {<br> index: optionIndex,<br> value: selectedText<br> } | 文本选择弹窗中设置menuoptions属性后，用户在文本选择操作后，点击菜单项后触发该回调，返回点击的菜单项序号和选中的文本内容。 | 76 | selectchange<sup>6+</sup> | {<br>start: number,<br>end: number<br> } | 文本选择变化时触发事件。 | 77 78- 当input类型为checkbox、radio时，支持如下事件： 79 80 | 名称 | 参数 | 描述 | 81 | ------ | ---------------------------------------- | ---------------------------------------- | 82 | change | {<br> checked:true \| false <br>} | checkbox多选框或radio单选框的checked状态发生变化时触发该事件。 | 83 84## 方法 85 86除支持[通用方法](js-components-common-methods.md)外，还支持如下方法： 87 88| 名称 | 参数 | 描述 | 89| ------------------- | ---------------------------------------- | ---------------------------------------- | 90| focus | {<br> focus: true\|false<br> }，<br>focus不传值时，默认为true。 | 使组件获得或者失去焦点，type为text\|email\|date\|time\|number\|password时，可弹出或收起输入法。 | 91| showError | {<br> error: string <br>} | 展示输入错误提示，type为text\|email\|date\|time\|number\|password时生效。 | 92| delete<sup>6+</sup> | - | type为text\|email\|date\|time\|number\|password时，根据当前光标位置删除文本内容，如果当前输入组件没有光标，默认删除最后一个字符并展示光标。 | 93 94## 示例 95 961. type为text 97 ```html 98 <!-- xxx.hml --> 99 <div class="content"> 100 <input id="input" class="input" type="text" value="" maxlength="20" enterkeytype="send" 101 headericon="/common/search.svg" placeholder="Please input text" onchange="change" 102 onenterkeyclick="enterkeyClick"> 103 </input> 104 <input class="button" type="button" value="Submit" onclick="buttonClick" style="color: blue"></input> 105 </div> 106 ``` 107 108 ```css 109 /* xxx.css */ 110 .content { 111 width: 100%; 112 flex-direction: column; 113 align-items: center; 114 } 115 .input { 116 width: 60%; 117 placeholder-color: gray; 118 } 119 .button { 120 width: 60%; 121 background-color: gray; 122 margin-top: 20px; 123 } 124 ``` 125 126 ```js 127 // xxx.js 128 import promptAction from '@ohos.promptAction' 129 export default { 130 change(e){ 131 promptAction.showToast({ 132 message: "value: " + e.value, 133 duration: 3000, 134 }); 135 }, 136 enterkeyClick(e){ 137 promptAction.showToast({ 138 message: "enterkey clicked", 139 duration: 3000, 140 }); 141 }, 142 buttonClick(e){ 143 this.$element("input").showError({ 144 error: 'error text' 145 }); 146 }, 147 } 148 ``` 149 150 151  152 1532. type为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. type为checkbox 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. type为radio 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
