解釋
小程序input表單(文本,數(shù)字,密碼)
<input />
屬性
| 屬性名 | 類型 | 默認(rèn)值 | 說明 |
|---|---|---|---|
| value | String | 輸入框的初始化內(nèi)容 | |
| type | String | "text" | input類型(text,number,idcard,digit) |
| password | Boolean | false | 是否顯示密碼類型 |
| placeholder | String | 輸入框中的占位符 | |
| placeholder-style | String | 指定placeholder的樣式 | |
| placeholder-class | String | "input-placeholder" | 指定placeholder的樣式類 |
| disabled | Boolean | false | 是否禁用,不能輸入 |
| maxlength | Number | 140 | 最大的輸入長(zhǎng)度,設(shè)置-1時(shí)無限制 |
| cursor-spacing | Number | 0 | 指定光標(biāo)與鍵盤的距離,單位為px |
| auto-focus | Boolean | false | 自動(dòng)聚焦,拉起鍵盤 |
| focus | Boolean | false | 獲取焦點(diǎn) |
| confirm-type | String | "done" | 鍵盤右下角的文字(send,search,next,go,done) |
| confirm-hold | Boolean | false | 點(diǎn)擊鍵盤文字,鍵盤是否收起 |
| cursor | Number | 獲取焦點(diǎn)focus后,光標(biāo)位置 | |
| adjust-position | Boolean | true | 鍵盤彈起,頁面自動(dòng)向上推動(dòng) |
| bindinput | EventHandle | 有文字輸入,觸發(fā)input事件,e.detail={value值,cursor光標(biāo)長(zhǎng)度} | |
| bindfocus | EventHandle | 輸入框聚焦時(shí)觸發(fā),e.detail={value,height} | |
| bind blur | EventHandle | 輸入框失去焦點(diǎn)時(shí)觸發(fā)e.detail={value} | |
| bind confirm | EventHandle | 點(diǎn)擊鍵盤完成時(shí),觸發(fā)e.detail={value} |
演示
小程序 input.wxml
小程序 input.js
示例
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<input class="weui-input" maxlength="10" bindinput="bindKeyInput" bindblur='bindblurEvent' placeholder="輸入同步到view中"/>
</view>
</view>
Page({
data: {
focus: false,
inputValue: ''
},
bindKeyInput: function (e) {
console.log('輸入內(nèi)容觸發(fā)input事件',e.detail)
this.setData({
inputValue: e.detail.value
})
},
bindblurEvent: function (e){
console.log("失去焦點(diǎn)時(shí)",e.detail)
},
bindReplaceInput: function (e) {
var value = e.detail.value
var pos = e.detail.cursor
var left
if (pos !== -1) {
// 光標(biāo)在中間
left = e.detail.value.slice(0, pos)
// 計(jì)算光標(biāo)的位置
pos = left.replace(/11/g, '2').length
}
// 直接返回對(duì)象允睹，可以對(duì)輸入進(jìn)行過濾處理锡移，同時(shí)可以控制光標(biāo)的位置
return {
value: value.replace(/11/g, '2'),
cursor: pos
}
// 或者直接返回字符串,光標(biāo)在最后邊
// return value.replace(/11/g,'2'),
},
bindHideKeyboard: function (e) {
if (e.detail.value === '123') {
// 收起鍵盤
wx.hideKeyboard()
}
}
})
