1# input 2 3>  **说明：** 4> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 5 6交互式组件，包括单选框，多选框，按钮和单行文本输入框。 7 8## 权限列表 9 10无 11 12 13## 子组件 14 15不支持。 16 17 18## 属性 19 20除支持[通用属性](../arkui-js/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/>>  **说明：**<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<MeunOption> | - | 否 | 设置文本选择弹框点击更多按钮之后显示的菜单项。 | 34| autofocus<sup>6+</sup> | boolean | false | 否 | 是否自动获焦。<br/>>  **说明：**<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除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式： 51 52| 名称 | 类型 | 默认值 | 必填 | 描述 | 53| -------- | -------- | -------- | -------- | -------- | 54| color | <color> | \#e6000000 | 否 | 单行输入框或者按钮的文本颜色。 | 55| font-size | <length> | 16px | 否 | 单行输入框或者按钮的文本尺寸。 | 56| allow-scale | boolean | true | 否 | 单行输入框或者按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>>  **说明：**<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的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | 59| caret-color<sup>6+</sup> | <color> | - | 否 | 设置输入光标的颜色。 | 60 61 62## 事件 63 64除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件： 65 66- 当input类型为text、email、date、time、number、password时，支持如下事件： 67 | 名称 | 参数 | 描述 | 68 | -------- | -------- | -------- | 69 | change | { value:inputValue } | 输入框输入内容发生变化时触发该事件，返回用户当前输入值。<br/>>  **说明：**<br/>> 改变value属性值不会触发该回调。 | 70 | enterkeyclick | { value:enterKey } | 软键盘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时生效。 | 71 | translate<sup>5+</sup> | { value: selectedText } | 设置此事件后，进行文本选择操作后文本选择弹窗会出现翻译按钮，点击翻译按钮之后，触发该回调，返回选中的文本内容。 | 72 | share<sup>5+</sup> | { value: selectedText } | 设置此事件后，进行文本选择操作后文本选择弹窗会出现分享按钮，点击分享按钮之后，触发该回调，返回选中的文本内容。 | 73 | search<sup>5+</sup> | { value: selectedText } | 设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。 | 74 | optionselect<sup>5+</sup> | { index:optionIndex, value: selectedText } | 文本选择弹窗中设置menuoptions属性后，用户在文本选择操作后，点击菜单项后触发该回调，返回点击的菜单项序号和选中的文本内容。 | 75 | selectchange<sup>6+</sup> | { start: number，end: number } | 文本选择变化时触发事件。 | 76 77- 当input类型为checkbox、radio时，支持如下事件： 78 | 名称 | 参数 | 描述 | 79 | -------- | -------- | -------- | 80 | change | { checked:true \| false } | checkbox多选框或radio单选框的checked状态发生变化时触发该事件。 | 81 82## 方法 83 84除支持[通用方法](../arkui-js/js-components-common-methods.md)外，还支持如下方法： 85 86| 名称 | 参数 | 描述 | 87| -------- | -------- | -------- | 88| focus | { focus: true\|false }，focus不传默认为true。 | 使组件获得或者失去焦点，type为text\|email\|date\|time\|number\|password时，可弹出或收起输入法。 | 89| showError | { error: string } | 展示输入错误提示，type为text\|email\|date\|time\|number\|password时生效。 | 90| delete<sup>6+</sup> | - | type为text\|email\|date\|time\|number\|password时，根据当前光标位置删除文本内容，如果当前输入组件没有光标，默认删除最后一个字符并展示光标。 | 91 92## 示例 93 941. type为text 95 ```html 96 <!-- xxx.hml --> 97 <div class="content"> 98 <input id="input" class="input" type="text" value="" maxlength="20" enterkeytype="send" 99 headericon="/common/search.svg" placeholder="Please input text" onchange="change" 100 onenterkeyclick="enterkeyClick"> 101 </input> 102 <input class="button" type="button" value="Submit" onclick="buttonClick" style="color: blue"></input> 103 </div> 104 ``` 105 106 ```css 107 /* xxx.css */ 108 .content { 109 width: 100%; 110 flex-direction: column; 111 align-items: center; 112 } 113 .input { 114 width: 60%; 115 placeholder-color: gray; 116 } 117 .button { 118 width: 60%; 119 background-color: gray; 120 margin-top: 20px; 121 } 122 ``` 123 124 ```js 125 // xxx.js 126 import prompt from '@system.prompt' 127 export default { 128 change(e){ 129 prompt.showToast({ 130 message: "value: " + e.value, 131 duration: 3000, 132 }); 133 }, 134 enterkeyClick(e){ 135 prompt.showToast({ 136 message: "enterkey clicked", 137 duration: 3000, 138 }); 139 }, 140 buttonClick(e){ 141 this.$element("input").showError({ 142 error: 'error text' 143 }); 144 }, 145 } 146 ``` 147 148 149  150 1512. type为button 152 ```html 153 <!-- xxx.hml --> 154 <div class="div-button"> 155 <input class="button" type="button" value="Input-Button"></input> 156 </div> 157 ``` 158 159 ```css 160 /* xxx.css */ 161 .div-button { 162 flex-direction: column; 163 align-items: center; 164 } 165 .button { 166 margin-top: 30px; 167 width: 280px; 168 } 169 ``` 170 171  172 1733. type为checkbox 174 ```html 175 <!-- xxx.hml --> 176 <div class="content"> 177 <input onchange="checkboxOnChange" checked="true" type="checkbox"></input> 178 </div> 179 ``` 180 181 ```css 182 /* xxx.css */ 183 .content{ 184 width: 100%; 185 height: 200px; 186 align-items: center; 187 justify-content: center; 188 } 189 ``` 190 191 ```js 192 // xxx.js 193 import prompt from '@system.prompt' 194 export default { 195 checkboxOnChange(e) { 196 prompt.showToast({ 197 message:'checked: ' + e.checked, 198 duration: 3000, 199 }); 200 } 201 } 202 ``` 203 204  205 2064. type为radio 207 ```html 208 <!-- xxx.hml --> 209 <div class="content"> 210 <input type="radio" checked='true' name="radioSample" value="radio1" onchange="onRadioChange('radio1')"></input> 211 <input type="radio" checked='false' name="radioSample" value="radio2" onchange="onRadioChange('radio2')"></input> 212 <input type="radio" checked='false' name="radioSample" value="radio3" onchange="onRadioChange('radio3')"></input> 213 </div> 214 ``` 215 216 ```css 217 /* xxx.css */ 218 .content{ 219 width: 100%; 220 height: 200px; 221 justify-content: center; 222 align-items: center; 223 } 224 ``` 225 226 ```js 227 // xxx.js 228 import prompt from '@system.prompt' 229 export default { 230 onRadioChange(inputValue, e) { 231 if (inputValue === e.value) { 232 prompt.showToast({ 233 message: 'The chosen radio is ' + e.value, 234 duration: 3000, 235 }); 236 } 237 } 238 } 239 ``` 240 241  242
