input
交互式组件,包括单选框,多选框,按钮和单行文本输入框。
权限列表
无
子组件
不支持。
属性
除支持通用属性外,还支持如下属性:
input组件类型,可选值为text,email,date,time,number,password,button,checkbox,radio。 其中text,email,date,time,number,password这六种类型之间支持动态切换修改。 button,checkbox,radio不支持动态修改。可选值定义如下:
|
||||
|
||||
在文本输入前的图标资源路径,该图标不支持点击事件(button,checkbox和radio不生效),图标格式为jpg,png和svg。 |
||||
Array<MenuOption> |
||||
表 1 MenuOption5+
样式
除支持通用样式外,还支持如下样式:
单行输入框或者按钮的字体粗细,见text组件font-weight的样式属性。 |
||||
事件
除支持通用事件外,还支持如下事件:
-
当input类型为text、email、date、time、number、password时,支持如下事件:
-
当input类型为checkbox、radio时,支持如下事件:
方法
除支持通用方法外,还支持如下方法:
使组件获得或者失去焦点,type为text|email|date|time|number|password时,可弹出或收起输入法。 |
||
type为text|email|date|time|number|password时,根据当前光标位置删除文本内容,如果当前输入组件没有光标,默认删除最后一个字符并展示光标。 |
示例
-
type为text
<!-- xxx.hml --> <div class="content"> <input id="input" class="input" type="text" value="" maxlength="20" enterkeytype="send" headericon="/common/search.svg" placeholder="Please input text" onchange="change" onenterkeyclick="enterkeyClick"> </input> <input class="button" type="button" value="Submit" onclick="buttonClick"></input> </div>
/* xxx.css */ .content { width: 60%; flex-direction: column; align-items: center; } .input { placeholder-color: gray; } .button { background-color: gray; margin-top: 20px; }
// xxx.js import prompt from '@system.prompt' export default { change(e){ prompt.showToast({ message: "value: " + e.value, duration: 3000, }); }, enterkeyClick(e){ prompt.showToast({ message: "enterkey clicked", duration: 3000, }); }, buttonClick(e){ this.$element("input").showError({ error: 'error text' }); }, }
-
type为button
<!-- xxx.hml --> <div class="div-button"> <input class="button" type="button" value="Input-Button"></input> </div>
/* xxx.css */ .div-button { flex-direction: column; align-items: center; } .button { margin-top: 30px; width: 280px; }
-
type为checkbox
<!-- xxx.hml --> <div class="content"> <input onchange="checkboxOnChange" checked="true"' type="checkbox"></input> </div>
/* xxx.css */ .content{ width: 100%; height: 200px; align-items: center; justify-content: center; }
// xxx.js import prompt from '@system.prompt' export default { checkboxOnChange(e) { prompt.showToast({ message:'checked: ' + e.checked, duration: 3000, }); } }
-
type为radio
<!-- xxx.hml --> <div class="content"> <input type="radio" checked='true' name="radioSample" value="radio1" onchange="onRadioChange('radio1')"></input> <input type="radio" checked='false' name="radioSample" value="radio2" onchange="onRadioChange('radio2')"></input> <input type="radio" checked='false' name="radioSample" value="radio3" onchange="onRadioChange('radio3')"></input> </div>
/* xxx.css */ .content{ width: 100%; height: 200px; justify-content: center; align-items: center; }
// xxx.js import prompt from '@system.prompt' export default { onRadioChange(inputValue, e) { if (inputValue === e.value) { prompt.showToast({ message: 'The chosen radio is ' + e.value, duration: 3000, }); } } }