以下將展示微信小程序之表單組件input源碼官方組件能力，組件樣式僅供參考，開發(fā)者可根據(jù)自身需求定義組件樣式，具體屬性參數(shù)詳見小程序開發(fā)文檔。
功能描述：
輸入框。該組件是原生組件，使用時請注意相關限制
屬性說明：
WebView：
Skyline：
?
Bug& Tip
1.tip:confirm-type的最終表現(xiàn)與手機輸入法本身的實現(xiàn)有關，部分安卓系統(tǒng)輸入法和第三方輸入法可能不支持或不完全支持
2.tip: input 組件是一個原生組件，字體是系統(tǒng)字體，所以無法設置font-family
3.tip: 在 input 聚焦期間，避免使用 css 動畫
4.tip: 對于將 input封裝在自定義組件中、而 form 在自定義組件外的情況，form 將不能獲得這個自定義組件中 input 的值。此時需要使用自定義組件的 內(nèi)置behaviors wx://form-field
5.tip: 鍵盤高度發(fā)生變化，keyboardheightchange事件可能會多次觸發(fā)，開發(fā)者對于相同的 height 值應該忽略掉
6.bug: 微信版本6.3.30, focus 屬性設置無效
7.bug: 微信版本6.3.30, placeholder 在聚焦時出現(xiàn)重影問題
示例代碼：
JAVASCRIPT：
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()
? ? }
? }
})
WXML：
<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>
版權聲明：本站所有內(nèi)容均由互聯(lián)網(wǎng)收集整理、上傳，如涉及版權問題，請聯(lián)系我們第一時間處理。
原文鏈接地址：https://developers.weixin.qq.com/miniprogram/dev/component/input.html
