1# input 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @kangshihui--> 5<!--Designer: @pssea--> 6<!--Tester: @jiaoaozihao--> 7<!--Adviser: @HelloCrease--> 8 9> **说明：** 10> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 11 12交互式组件，包括单选框，多选框，按钮和单行文本输入框。 13 14## 权限列表 15 16无 17 18 19## 子组件 20 21不支持。 22 23 24## 属性 25 26除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： 27 28| 名称 | 类型 | 默认值 | 必填 | 描述 | 29| -------------------------------- | ----------------------- | --------- | ---- | ---------------------------------------- | 30| 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：定义密码字段（字段中的字符会被遮蔽）。 | 31| checked | boolean | false | 否 | 当前组件是否选中，仅type为checkbox和radio生效。<br/>true表示选中，false表示未选中。 | 32| name | string | - | 否 | input组件的名称。<br>type为radio时，name为必填。 | 33| value | string | - | 否 | input组件的value值，当类型为radio时必填且相同name值的选项该值唯一。 | 34| placeholder | string | - | 否 | 设置提示文本的内容，仅在type为text\|email\|date\|time\|number\|password时生效。 | 35| maxlength | number | - | 否 | 输入框可输入的最多字符数量，不填表示不限制输入框中字符数量。 | 36| enterkeytype | string | default | 否 | 不支持动态修改。<br/>设置软键盘Enter按钮的类型，可选值为：<br/>- default：默认<br/>- next：下一项<br/>- go：前往<br/>- done：完成<br/>- send：发送<br/>- search：搜索<br/>除“next”外，点击后会自动收起软键盘。 | 37| headericon | string | - | 否 | 在文本输入前的图标资源路径，该图标不支持点击事件（button，checkbox和radio不生效），图标格式为jpg，png和svg。 | 38| showcounter<sup>5+</sup> | boolean | false | 否 | 文本输入框是否显示计数下标，需要配合maxlength一起使用。<br/>true表示显示，false表示不显示。 | 39| menuoptions<sup>5+</sup> | Array<MenuOption> | - | 否 | 设置文本选择弹框点击更多按钮之后显示的菜单项。 | 40| autofocus<sup>6+</sup> | boolean | false | 否 | 是否自动获焦。<br/>应用首页中设置不生效，可在onActive中延迟（100-500ms左右）调用focus方法实现输入框在首页中自动获焦。<br/>true表示文本框自动获焦，false表示文本框不自动获焦。 | 41| selectedstart<sup>6+</sup> | number | -1 | 否 | 开始选择文本时初始选择位置。 | 42| selectedend<sup>6+</sup> | number | -1 | 否 | 开始选择文本时结尾选择位置。 | 43| softkeyboardenabled<sup>6+</sup> | boolean | true | 否 | 编辑时是否弹出系统软键盘。<br/>true表示会弹出系统软键盘，false表示不会弹出。 | 44| showpasswordicon<sup>6+</sup> | boolean | true | 否 | 是否显示密码框末尾的图标（仅type为password时生效）。<br/>true表示显示密码框末尾的图标，false表示不显示。 | 45 46**表1** MenuOption<sup>5+</sup> 47 48| 名称 | 类型 | 描述 | 49| ------- | ------ | ----------- | 50| icon | string | 菜单选项中的图标路径。 | 51| content | string | 菜单选项中的文本内容。 | 52 53 54## 样式 55 56除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： 57 58| 名称 | 类型 | 默认值 | 必填 | 描述 | 59| ------------------------ | -------------------------- | ---------- | ---- | ---------------------------------------- | 60| color | <color> | \#e6000000 | 否 | 单行输入框或者按钮的文本颜色。 | 61| font-size | <length> | 16px | 否 | 单行输入框或者按钮的文本尺寸。 | 62| allow-scale | boolean | true | 否 | 单行输入框或者按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。true表示跟随系统放大缩小，false表示不跟随系统放大缩小。<br/>如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | 63| placeholder-color | <color> | \#99000000 | 否 | 单行输入框的提示文本的颜色，type为text\|email\|date\|time\|number\|password时生效。 | 64| font-weight | number \| string | normal | 否 | 单行输入框或者按钮的字体粗细，见[text组件font-weight的样式属性](js-components-basic-text.md#样式)。 | 65| caret-color<sup>6+</sup> | <color> | - | 否 | 设置输入光标的颜色。 | 66 67 68## 事件 69 70除支持[通用事件](js-components-common-events.md)外，还支持如下事件： 71 72- 当input类型为text、email、date、time、number、password时，支持如下事件： 73 74 | 名称 | 参数 | 描述 | 75 | ------------------------- | ---------------------------------------- | ---------------------------------------- | 76 | change | {<br> value: inputValue<br> } | 输入框输入内容发生变化时触发该事件，返回用户当前输入值。<br/>改变value属性值不会触发该回调。 | 77 | 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时生效。 | 78 | translate<sup>5+</sup> | {<br> value: selectedText<br> } | 设置此事件后，进行文本选择操作后文本选择弹窗会出现翻译按钮，点击翻译按钮之后，触发该回调，返回选中的文本内容。 | 79 | share<sup>5+</sup> | {<br> value: selectedText<br> } | 设置此事件后，进行文本选择操作后文本选择弹窗会出现分享按钮，点击分享按钮之后，触发该回调，返回选中的文本内容。 | 80 | search<sup>5+</sup> | {<br> value: selectedText<br> } | 设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。 | 81 | optionselect<sup>5+</sup> | {<br> index: optionIndex,<br> value: selectedText<br> } | 文本选择弹窗中设置menuoptions属性后，用户在文本选择操作后，点击菜单项后触发该回调，返回点击的菜单项序号和选中的文本内容。 | 82 | selectchange<sup>6+</sup> | {<br>start: number,<br>end: number<br> } | 文本选择变化时触发事件。 | 83 84- 当input类型为checkbox、radio时，支持如下事件： 85 86 | 名称 | 参数 | 描述 | 87 | ------ | ---------------------------------------- | ---------------------------------------- | 88 | change | {<br> checked:true \| false <br>} | checkbox多选框或radio单选框的checked状态发生变化时触发该事件。 | 89 90## 方法 91 92除支持[通用方法](js-components-common-methods.md)外，还支持如下方法： 93 94| 名称 | 参数 | 描述 | 95| ------------------- | ---------------------------------------- | ---------------------------------------- | 96| focus | {<br> focus: true\|false<br> }，<br>focus不传值时默认为true。 | 使组件获得或者失去焦点，type为text\|email\|date\|time\|number\|password时，可弹出或收起输入法。 | 97| showError | {<br> error: string <br>} | 展示输入错误提示，type为text\|email\|date\|time\|number\|password时生效。 | 98| delete<sup>6+</sup> | - | type为text\|email\|date\|time\|number\|password时，根据当前光标位置删除文本内容，如果当前输入组件没有光标，默认删除最后一个字符并展示光标。 | 99 100## 示例 101 1021. type为text 103 ```html 104 <!-- xxx.hml --> 105 <div class="content"> 106 <input id="input" class="input" type="text" value="" maxlength="20" enterkeytype="send" 107 headericon="/common/search.svg" placeholder="Please input text" onchange="change" 108 onenterkeyclick="enterkeyClick"> 109 </input> 110 <input class="button" type="button" value="Submit" onclick="buttonClick" style="color: blue"></input> 111 </div> 112 ``` 113 114 ```css 115 /* xxx.css */ 116 .content { 117 width: 100%; 118 flex-direction: column; 119 align-items: center; 120 } 121 .input { 122 width: 60%; 123 placeholder-color: gray; 124 } 125 .button { 126 width: 60%; 127 background-color: gray; 128 margin-top: 20px; 129 } 130 ``` 131 132 ```js 133 // xxx.js 134 import promptAction from '@ohos.promptAction'; 135 export default { 136 change(e){ 137 promptAction.showToast({ 138 message: "value: " + e.value, 139 duration: 3000, 140 }); 141 }, 142 enterkeyClick(e){ 143 promptAction.showToast({ 144 message: "enterkey clicked", 145 duration: 3000, 146 }); 147 }, 148 buttonClick(e){ 149 this.$element("input").showError({ 150 error: 'error text' 151 }); 152 }, 153 } 154 ``` 155 156 157  158 1592. type为button 160 ```html 161 <!-- xxx.hml --> 162 <div class="div-button"> 163 <input class="button" type="button" value="Input-Button"></input> 164 </div> 165 ``` 166 167 ```css 168 /* xxx.css */ 169 .div-button { 170 flex-direction: column; 171 align-items: center; 172 } 173 .button { 174 margin-top: 30px; 175 width: 280px; 176 } 177 ``` 178 179  180 1813. type为checkbox 182 ```html 183 <!-- xxx.hml --> 184 <div class="content"> 185 <input onchange="checkboxOnChange" checked="true" type="checkbox"></input> 186 </div> 187 ``` 188 189 ```css 190 /* xxx.css */ 191 .content{ 192 width: 100%; 193 height: 200px; 194 align-items: center; 195 justify-content: center; 196 } 197 ``` 198 199 ```js 200 // xxx.js 201 import promptAction from '@ohos.promptAction'; 202 export default { 203 checkboxOnChange(e) { 204 promptAction.showToast({ 205 message:'checked: ' + e.checked, 206 duration: 3000, 207 }); 208 } 209 } 210 ``` 211 212  213 2144. type为radio 215 ```html 216 <!-- xxx.hml --> 217 <div class="content"> 218 <input type="radio" checked='true' name="radioSample" value="radio1" onchange="onRadioChange('radio1')"></input> 219 <input type="radio" checked='false' name="radioSample" value="radio2" onchange="onRadioChange('radio2')"></input> 220 <input type="radio" checked='false' name="radioSample" value="radio3" onchange="onRadioChange('radio3')"></input> 221 </div> 222 ``` 223 224 ```css 225 /* xxx.css */ 226 .content{ 227 width: 100%; 228 height: 200px; 229 justify-content: center; 230 align-items: center; 231 } 232 ``` 233 234 ```js 235 // xxx.js 236 import promptAction from '@ohos.promptAction'; 237 export default { 238 onRadioChange(inputValue, e) { 239 if (inputValue === e.value) { 240 promptAction.showToast({ 241 message: 'The chosen radio is ' + e.value, 242 duration: 3000, 243 }); 244 } 245 } 246 } 247 ``` 248 249  250
