這篇文章主要介紹了微信小程式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中文網其他相關文章!