全部产品

input

更新时间:2020-04-07 16:45:51

本文介绍输入框(input)。

属性名 类型 默认值 描述 最低版本
value String - 初始内容 -
name String - 组件名字,用于表单提交获取数据 -
type String text input 的类型,有效值:textnumberidcarddigitnumberpaddigitpadidcardpad numberpaddigitpadidcardpad1.13.0,类型客户端 10.1.50 开始支持,可通过 my.canIUse('input.type.numberpad') 来检测。
password Boolean false 是否是密码类型 -
placeholder String - 占位符 -
placeholder-style String - 指定 placeholder 的样式 1.6.0
placeholder-class String - 指定 placeholder 的样式类 1.6.0
disabled Boolean false 是否禁用 -
maxlength Number 140 最大长度 -
focus Boolean false 获取焦点 不支持此特性
confirm-type String done 设置键盘右下角按钮的文字,有效值:done(显示“完成”)、go(显示“前往”)、next(显示“下一个”)、search(显示“搜索”)、send(显示“发送”),平台不同显示的文字略有差异.注意只有在 type=text 时有效 1.7.0
confirm-hold Boolean false 点击键盘右下角按钮时是否保持键盘不收起状态 1.7.0
cursor Number - 指定focus时的光标位置 -
selection-start Number -1 获取光标时,选中文本对应的焦点光标起始位置,需要和selection-end配合使用 1.7.0
selection-end Number -1 获取光标时,选中文本对应的焦点光标结束位置,需要和selection-start配合使用 1.7.0
randomNumber Boolean false 当type为number、digit、idcard数字键盘是否随机排列 1.9.0
controlled Boolean false 是否为受控组件。为 true时,value内容会完全受setData控制 1.8.0
onInput EventHandle - 键盘输入时触发input事件,event.detail = {value: value} -
onConfirm EventHandle - 点击键盘完成时触发,event.detail = {value: value} -
onFocus EventHandle - 聚焦时触发,event.detail = {value: value} -
onBlur EventHandle - 失去焦点时触发,event.detail = {value: value} -

图示

image | center

代码示例

  1. <input maxlength="10" placeholder="最大输入长度10" />
  2. <input onInput="bindKeyInput" placeholder="输入同步到view中"/>
  3. <input type="number" placeholder="这是一个数字输入框" />
  4. <input password type="text" placeholder="这是一个密码输入框" />
  5. <input type="digit" placeholder="带小数点的数字键盘"/>
  6. <input type="idcard" placeholder="身份证输入键盘" />
  1. Page({
  2. data: {
  3. inputValue: '',
  4. },
  5. bindKeyInput(e) {
  6. this.setData({
  7. inputValue: e.detail.value,
  8. });
  9. },
  10. });

iOS 键盘与组件交互异常处理

对于需要启动键盘的组件,如 input、textarea 等,目前默认使用的是原生键盘。如果键盘和组件的交互存在异常,可在组件中添加 enableNative="{{false}}" 属性,如下代码所示,即可恢复到使用 WKWebview 的键盘。同时由于使用的是系统键盘,也就不能使用 mPaaS 提供的数字键盘等,键盘相关目前不再专门适配,如有交互异常问题请使用该方式进行处理。

  1. <input placeholder="身份证输入键盘" enableNative="{{false}}" />