input

基礎(chǔ)庫(kù) 1.0.0 開(kāi)始支持本組件。

輸入框組件，用于鍵盤交互。

屬性說(shuō)明

type 的有效值

bindinput 說(shuō)明

鍵盤輸入時(shí)觸發(fā), 若返回 string 則替換 input 內(nèi)文本內(nèi)容。

event.detail.value 為輸入框內(nèi)容

event.detail.cursor 為光標(biāo)位置

bindfocus 說(shuō)明

輸入框失去焦點(diǎn)時(shí)觸發(fā)

event.detail.value 為輸入框內(nèi)容

event.detail.height 為鍵盤高度

bindblur 說(shuō)明

輸入框失去焦點(diǎn)時(shí)觸發(fā)

event.detail.value 為輸入框內(nèi)容

bindconfirm 說(shuō)明

用戶點(diǎn)擊鍵盤的完成按鈕時(shí)觸發(fā)

event.detail.value 為輸入框內(nèi)容

效果圖

代碼示例

<view class="page-cells page-cells_after-title">
  <view class="page-cell page-cell_input">
    <input
      class="page-input"
      placeholder="這個(gè)只有在按鈕點(diǎn)擊的時(shí)候才聚焦"
      focus="{{focus}}"
    />
  </view>
</view>
<view class="btn-area">
  <button bindtap="bindButtonTap">使得輸入框獲取焦點(diǎn)</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測(cè)試" 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：避免過(guò)于頻繁地在 bindinput 回調(diào)里執(zhí)行 setData({ value: ... })，如果想在鍵盤輸入時(shí)改變 input 框的值，可以直接在 bindinput 回調(diào)里 return 一個(gè)字符串。重新設(shè)置 focus cursor selection-start selection-end 可以觸發(fā)對(duì)應(yīng)效果。 但由用戶行為導(dǎo)致的失去焦點(diǎn)，選擇文字 行為不會(huì)同步更新 data。因此使用 this.setData 更新關(guān)聯(lián) data 可以理解為派發(fā)了一個(gè)事件，但是不能根據(jù) data 判斷組件當(dāng)前狀態(tài)。