input


输入框

属性

属性名类型必填默认值说明
valueString输入框的初始内容
typeString"text"输入框的类型
placeholderString提示用户输入的内容
disabledBooleanfalse是否禁用
focusBooleanfalse获取焦点(web端不支持)
maxlengthNumber140最大输入长度
return-key-typeString"done"设置键盘右下角按钮的文字(web端不支持)
placer-holder-colorString"#bebebe"指定placeholder的颜色(web端不支持)
cstyleString自定义样式,如 "color:red;text-align:center;",在新版内置组件 c-style 已废弃
maxValueNumberInfinity最大值 仅对type="number"生效
minValueNumber-Infinity最小值 仅对type="number"生效
c-bind:inputEventHandle 键盘输入时触发 返回事件对象: event.type="input", event.detail={value}
c-bind:confirmEventHandle点击完成按钮时触发 返回事件对象: event.type="confirm", event.detail
c-bind:focusEventHandle输入框获取焦点时触发 返回事件对象: event.type="focus", event.detail
c-bind:blurEventHandle输入框失去焦点时触发 返回事件对象: event.type="blur" event.detail
type 的有效值:
说明
text文本类型的输入
password密码类型的输入
number数字类型的输入
return-key-type 的有效值:
说明
done右下角按钮为“完成”
search右下角按钮为“搜索”
next右下角按钮为“下一个”
go右下角按钮为“前往”

示例

  1. <template>
  2. <input placeholder='请输入你的用户名' focus="{{isfocus}}" c-bind:blur="bindblurevent"></input>
  3. </template>
  4. <script>
  5. class Input {
  6. data = {
  7. isfocus: false
  8. }
  9. computed = {}
  10. watch = {}
  11. methods = {
  12. bindblurevent() {
  13. console.log('blur');
  14. this.isfocus = false;
  15. }
  16. }
  17. mounted = function(res) {
  18. setTimeout(() => {
  19. this.isfocus = true;
  20. }, 300);
  21. }
  22. };
  23. export default new Input();
  24. </script>
  25. <script cml-type="json">
  26. {
  27. "base": {}
  28. }
  29. </script>

input  - 图1wx

input  - 图2web

input  - 图3native

查看完整示例

Bug & Tip

  • <input>web端不支持自动focus
  • <input>return-key-type字段web端不支持