微信小程序表單組件輸入框 input

input

基礎庫 1.0.0 開始支持，低版本需做兼容處理。

輸入框。該組件是原生組件，使用時請注意相關限制

type 的合法值

confirm-type 的合法值

提示：

1. confirm-type的最終表現(xiàn)與手機輸入法本身的實現(xiàn)有關，部分安卓系統(tǒng)輸入法和第三方輸入法可能不支持或不完全支持
2. input 組件是一個原生組件，字體是系統(tǒng)字體，所以無法設置 font-family
3. 在 input 聚焦期間，避免使用 css 動畫
4. 對于將 input 封裝在自定義組件中、而 form 在自定義組件外的情況， form 將不能獲得這個自定義組件中 input 的值。此時需要使用自定義組件的 內置 behaviors wx://form-field
5. 鍵盤高度發(fā)生變化，keyboardheightchange事件可能會多次觸發(fā)，開發(fā)者對于相同的height值應該忽略掉
6. 微信版本 6.3.30, focus 屬性設置無效
7. 微信版本 6.3.30, placeholder 在聚焦時出現(xiàn)重影問題

示例代碼：

<view class="page-body">
  <view class="page-section">
    <view class="weui-cells__title">可以自動聚焦的input</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input" auto-focus placeholder="將會獲取焦點"/>
      </view>
    </view>
  </view>
  <view class="page-section">
    <view class="weui-cells__title">控制最大輸入長度的input</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input" maxlength="10" placeholder="最大輸入長度為10" />
      </view>
    </view>
  </view>
  <view class="page-section">
    <view class="weui-cells__title">實時獲取輸入值：{{inputValue}}</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input"  maxlength="10" bindinput="bindKeyInput" placeholder="輸入同步到view中"/>
      </view>
    </view>
  </view>
  <view class="page-section">
    <view class="weui-cells__title">控制輸入的input</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input"  bindinput="bindReplaceInput" placeholder="連續(xù)的兩個1會變成2" />
      </view>
    </view>
  </view>
  <view class="page-section">
    <view class="weui-cells__title">控制鍵盤的input</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input"  bindinput="bindHideKeyboard" placeholder="輸入123自動收起鍵盤" />
      </view>
    </view>
  </view>
  <view class="page-section">
    <view class="weui-cells__title">數(shù)字輸入的input</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input" type="number" placeholder="這是一個數(shù)字輸入框" />
      </view>
    </view>
  </view>
  <view class="page-section">
    <view class="weui-cells__title">密碼輸入的input</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input" password type="text" placeholder="這是一個密碼輸入框" />
      </view>
    </view>
  </view>
  <view class="page-section">
    <view class="weui-cells__title">帶小數(shù)點的input</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input" type="digit" placeholder="帶小數(shù)點的數(shù)字鍵盤"/>
      </view>
    </view>
  </view>
  <view class="page-section">
    <view class="weui-cells__title">身份證輸入的input</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input" type="idcard" placeholder="身份證輸入鍵盤" />
      </view>
    </view>
  </view>
  <view class="page-section">
    <view class="weui-cells__title">控制占位符顏色的input</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input" placeholder-style="color:#F76260" placeholder="占位符字體是紅色的" />
      </view>
    </view>
  </view>
</view>

Page({
  data: {
    focus: false,
    inputValue: ''
  },
  bindKeyInput: function (e) {
    this.setData({
      inputValue: e.detail.value
    })
  },
  bindReplaceInput: function (e) {
    var value = e.detail.value
    var pos = e.detail.cursor
    var left
    if (pos !== -1) {
      // 光標在中間
      left = e.detail.value.slice(0, pos)
      // 計算光標的位置
      pos = left.replace(/11/g, '2').length
    }

    // 直接返回對象，可以對輸入進行過濾處理，同時可以控制光標的位置
    return {
      value: value.replace(/11/g, '2'),
      cursor: pos
    }

    // 或者直接返回字符串,光標在最后邊
    // return value.replace(/11/g,'2'),
  },
  bindHideKeyboard: function (e) {
    if (e.detail.value === '123') {
      // 收起鍵盤
      wx.hideKeyboard()
    }
  }
})