支付宝小程序表单组件输入框·Input

输入框，可设置输入内容的类型、长度、显示形式等。当用户需要输入文字内容时点击文本框，它将自动打开键盘。使用文本字段来请求少量信息。

注意：

iOS 系统支付宝客户端版本10.1.80及以上不支持 focus=true 自动唤起。
小程序中 input 如果父类是 position: fixed，可以加上 enableNative="{{false}}"，解决输入框错位/光标上移问题。个别情况下定位问题会导致光标错位，所以需要把 false 改为 true，代码块为 enableNative="{{true}}"。

扫码体验

示例代码

<!-- API-DEMO page/component/input/input.axml -->
<view class="page">
  <view class="page-description">输入框</view>
  <view class="page-section">
    <view class="form-row">
      <view class="form-row-label">受控聚焦</view>
      <view class="form-row-content">
        <input class="input" focus="{{focus}}" onFocus="onFocus" onBlur="onBlur" placeholder="input something" />
      </view>
    </view>
    <view class="page-section-btns">
      <button size="mini" onTap="bindButtonTap">聚焦</button>
    </view>
  </view>
  <view class="page-section">
    <view class="form-row">
      <view class="form-row-label"><label for="controlled">显示输入</label></view>
      <view class="form-row-content">
        <input class="input" id="controlled" onInput="bindKeyInput" placeholder="show input content" />
      </view>
    </view>
    <view class="extra-info">你输入的是：{{inputValue}}</view>
  </view>
  <view class="page-section">
    <view class="form-row">
      <view class="form-row-label">最大长度</view>
      <view class="form-row-content">
        <input class="input" maxlength="10" placeholder="maxlength 10" />
      </view>
    </view>
    <view class="form-line" />
    <view class="form-row">
      <view class="form-row-label">收起键盘</view>
      <view class="form-row-content">
        <input class="input" onInput="bindHideKeyboard" placeholder="输入 123 自动收起键盘" />
      </view>
    </view>
    <view class="form-line" />
    <view class="form-row">
      <view class="form-row-label">输入密码</view>
      <view class="form-row-content">
        <input class="input" password type="text" placeholder="密码输入框" />
      </view>
    </view>
    <view class="form-line" />
    <view class="form-row">
      <view class="form-row-label">输入数字</view>
      <view class="form-row-content">
        <input class="input" type="number" placeholder="数字输入框" />
      </view>
    </view>
    <view class="form-line" />
    <view class="form-row">
      <view class="form-row-label">小数点键盘</view>
      <view class="form-row-content">
        <input class="input" type="digit" placeholder="带小数点的数字键盘" />
      </view>
    </view>
    <view class="form-line" />
    <view class="form-row">
      <view class="form-row-label">身份证键盘</view>
      <view class="form-row-content">
        <input class="input" type="idcard" placeholder="身份证输入键盘" />
      </view>
    </view>
  </view>
  <view class="page-section">
    <view class="page-section-title">搜索框</view>
    <view class="page-section-demo">
      <view class="search-outer">
        <input
          class="search-input"
          placeholder="搜索"
          value="{{search}}"
          onConfirm="doneSearch"
          onInput="handleSearch"
        />
        <text class="search-cancel" onTap="clearSearch">取消</text>
      </view>
    </view>
  </view>
</view>
// API-DEMO page/component/input/input.js
Page({
  data: {
    focus: false,
    inputValue: '',
  },
  bindButtonTap() {
    // blur 事件和这个冲突
    setTimeout(() => {
      this.onFocus();
    }, 100);
  },
  onFocus() {
    this.setData({
      focus: true,
    });
  },
  onBlur() {
    this.setData({
      focus: false,
    });
  },
  bindKeyInput(e) {
    this.setData({
      inputValue: e.detail.value,
    });
  },
  bindHideKeyboard(e) {
    if (e.detail.value === '123') {
      // 收起键盘
      my.hideKeyboard();
    }
  },
  handleSearch(e) {
    console.log('search', e.detail.value);
    this.setData({
      search: e.detail.value,
    });
  },
  doneSearch() {
    console.log('doneSearch', this.data.search);
    my.hideKeyboard();
  },
  clearSearch() {
    console.log('clear search', this.data.search);
    this.setData({
      search: '',
    });
  },
});
/* API-DEMO page/component/input/input.acss */
.extra-info {
  border-top: 1px solid #ddd;
  margin-left: 30rpx;
  padding: 20rpx 0;
  overflow: auto;
}
.search-outer {
  box-sizing: border-box;
  display:flex;
  height:40px;
  overflow:hidden;
  padding: 8px;
  border-bottom: 1px solid #ddd;
  background-color: #efeff4;
}
.search-outer * {
  box-sizing: border-box;
}
.search-input {
  flex:1;
  text-align: left;
  display: block;
  color: #000;
  height: 24px;
  font-size: 15px;
  background-color: #fff;
  border-color: transparent;
}
.search-input:focus + .search-cancel {
  margin-right:0;
  opacity: 1;
}
.search-cancel {
  margin-right:-40px;
  display: inline-block;
  opacity: 0;
  padding-left: 8px;
  height: 24px;
  line-height: 24px;
  font-size: 16px;
  color: #108ee9;
  text-align: right;
  transition: margin-right .3s,opacity .3s;
  transition-delay: .1s;
}

属性

属性	类型	默认值	描述	最低版本
value	String	-	初始内容。	-
name	String	-	组件名字，用于表单提交获取数据。	-
type	String	text	input 的类型，有效值：`text`、 `number`、 `idcard`、 `digit`(可以唤起带有小数点的数字键盘)、`numberpad`、`digitpad`、 `idcardpad`。	`numberpad`、`digitpad`、 `idcardpad` 基础库 1.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
random-number	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}`。	-

常见问题

如何解决 input 输入框在 iOS 客户端的光标漂移问题？

步骤一：若已在 input 中设置了 enableNative 属性，删除 enableNative 属性的全部设置。

步骤二：在 app.json 文件 window 对象内，设置 "enableInPageRenderInput":"YES"。

为何 input 输入框聚焦的时候出现白屏，只有键盘弹出来？

因为使用定位导致键盘把页面 input 内容顶上去了，建议使用 SearchBar 搜索框。

为何 input 输入的内容没有在输入框显示？

商户有使用 fixed 定位建议更换 fixed 定位使用相对或者绝对定位。

小程序 input 输入框获取焦点时会向上推输入框，能否固定？

暂不支持，input 是在聚焦的时候弹起，失去焦点的时候收起，若让键盘处于一直弹起状态，就要保证 input 一直聚焦。

input 输入框弹起键盘有遮挡，影响其他标签控件触发点击事件？

建议修改自定义 view 样式。

input 输入框是否支持点击事件，比如 click、tap、touchstart？

暂时不支持，可以考虑外嵌一层 view，利用 view 的 onTap 事件实现。

input 如何用 js 代码清空数据？

需要添加属性 controlled="{{true}}" ，也可以在 onInput 事件里把输入的值通过 setData 再赋值给 value，再去 setData 设置 value。

//axml
<input class="internet_input" value="{{textValue}}" onInput="keyNum" controlled={{true}} type="text"  />
//input如何用js清空
keyNum() {
      this.setData({
        textValue:''
    })
 }

input 如何进行监听，如果出现不能监听问题如何解决？

可以使用 input 的 onInput 事件监听输入值，通过 e.detail.value 打印出输入值进行正则表达式匹配校验。详情请见示例代码。

如何判断 input 的 value 值是不是符合正则表示式？

使用 var reg = new RegExp("\w+\s", "g")； getRegExp() 需要在 sjs 中使用。 sjs 脚本不能直接在 js 中引入调用。

父组件如何调用子组件的 input 事件?

请参见组件对象。

input 内容跳动、延迟如何处理？

可以使用防抖动，示例代码如下：

var timer = null


element.input = function () {


    clearTimeout(timer) // 每次进来的时候都将之前的清除掉，如果还没到一秒的时候就将之前的清除掉，这样就不会触发之前setTimeout绑定的事件， 如果超过一秒，之前的事件就会被触发下次进来的时候同样清除之前的timer


    timer = setTimeout(function () {


        // 在这里进行我们的操作  这样就不会频繁的进行我们这里面的操作了


    }, 1000)


}

如何在 input 设置了 disabled=true 时，修改 input 的样式？

修改字体颜色，会有灰蒙颜色的效果，无法去除。如果只想显示内容，建议使用 view 实现显示内容。

.extra-info {
  border-top: 1px solid #ddd;
  margin-left: 30rpx;
  padding: 20rpx 0;
  overflow: auto;
  disabled：true;
  color: red
}

支付宝小程序表单组件 输入框·Input