input

基础库 1.0.0 开始支持本组件。

输入框组件，用于键盘交互。

属性说明

type 的有效值

bindinput 说明

键盘输入时触发, 若返回 string 则替换 input 内文本内容。

event.detail.value 为输入框内容

event.detail.cursor 为光标位置

bindfocus 说明

输入框失去焦点时触发

event.detail.value 为输入框内容

event.detail.height 为键盘高度

bindblur 说明

输入框失去焦点时触发

event.detail.value 为输入框内容

bindconfirm 说明

用户点击键盘的完成按钮时触发

event.detail.value 为输入框内容

效果图

代码示例

<view class="page-cells page-cells_after-title">
  <view class="page-cell page-cell_input">
    <input
      class="page-input"
      placeholder="这个只有在按钮点击的时候才聚焦"
      focus="{{focus}}"
    />
  </view>
</view>
<view class="btn-area">
  <button bindtap="bindButtonTap">使得输入框获取焦点</button>
</view>

<view class="page-cells page-cells_after-title">
  <view class="page-cell page-cell_input">
    <input
      class="page-input"
      placeholder="focus详情"
      bindfocus="onfocus"
      bindconfirm="onconfirm"
    />
  </view>
</view>

<view class="btn-area">{{focusDetail}}</view>

<view class="page-cells page-cells_after-title">
  <view class="page-cell page-cell_input">
    <input class="page-input" placeholder="blur测试" bindblur="onblur" />
  </view>
</view>

Page({
  data: {
    focus: false
  },
  bindButtonTap: function(e) {
    this.setData({
      focus: true
    });
  },
  onfocus: function(e) {
    console.log(e);
    this.setData({ focusDetail: JSON.stringify(e.detail) });
  },
  onblur: function(e) {
    tt.showToast({ title: "blur" });
  },
  onconfirm: function(e) {
    tt.showToast({ title: "confirm" });
  }
});

Bug & Tip

• Tip：避免过于频繁地在 bindinput 回调里执行 setData({ value: ... })，如果想在键盘输入时改变 input 框的值，可以直接在 bindinput 回调里 return 一个字符串。重新设置 focus cursor selection-start selection-end 可以触发对应效果。 但由用户行为导致的失去焦点，选择文字 行为不会同步更新 data。因此使用 this.setData 更新关联 data 可以理解为派发了一个事件，但是不能根据 data 判断组件当前状态。