這篇文章主要介紹了微信小程式input輸入框詳解及簡單實例的相關資料,需要的朋友可以參考下
實現效果圖：
微信小程式輸入框input
| 屬性名稱 | 類型 | 預設值 | 說明 |
|---|---|---|---|
| value | #String | 輸入框的內容 | |
| type | String | text | input的類型，有效值：text,number,idcard,digit ,time,date |
| password | Boolean | false | 是否是密碼類型 |
| placeholder | String | # | 輸入方塊為空時佔位符 |
| placeholder-style | String | #指定placeholder的樣式 | |
| placeholder-class | String | input-placeholder | 指定placeholder的樣式類別 |
| disabled | Boolean | false | 是否停用 |
| maxlength | Number | 140 | ##最大輸入長度，設定為0的時候不限制最大長度|
| #Boolean | false | 自動聚焦，拉起鍵盤。頁面中只能有一個input設定auto-focus屬性 | |
| Boolean | false | 使得input取得焦點 | |
| EventHandle | 輸入方塊失去焦點時，觸發bindchange事件，event.detail={value:value} | ||
| EventHandle | 除了date/time類型外的輸入框，當鍵盤輸入時，觸發input事件，event.detail={value:value}，處理 | 函數可以直接return一個字串，將取代輸入框的內容。 | |
| EventHandle | 輸入方塊聚焦時觸發，event.detail = {value:value} | ||
| EventHandle | 輸入框失去焦點時觸發，event.detail = {value:value} |
<!--input.wxml-->
<view>
<input>
</view>
<view>
<input>
<view>
<button>使得输入框获取焦点</button>
</view>
</view>
<view>
<input>
</view>
<view>
<view>你输入的是：{{inputValue}}</view>
<input>
</view>
<view>
<input>
</view>
<view>
<input>
</view>
<view>
<input>
</view>
<view>
<input>
</view>
<view>
<input>
</view>
<view>
<input>
</view>
<view>
<input>
</view>
<view>
<input>
</view>//input.js
Page({
data:{
focus:false,
inputValue:""
},
bindButtonTap:function(){
this.setData({
focus:Date.now()
})
},
bindKeyInput:function(e){
this.setData({
inputValue:e.detail.value
})
},
bindReplaceInput:function(e){
var value = e.detail.value;
var pos = e.detail.cursor;
if(pos != -1){
//光标在中间
var 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();
}
}
})以上是微信小程式input輸入框詳解實例碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
