溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了微信小程序如何獲取輸入框的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇微信小程序如何獲取輸入框文章都會有所收獲，下面我們一起來看看吧。
輸入框。
| 屬性名 | 類型 | 默認值 | 說明 | 最低版本 |
|---|---|---|---|---|
| value | String | 輸入框的初始內容 | ||
| type | String | "text" | input 的類型 | |
| password | Boolean | false | 是否是密碼類型 | |
| placeholder | String | 輸入框為空時占位符 | ||
| placeholder-style | String | 指定 placeholder 的樣式 | ||
| placeholder-class | String | "input-placeholder" | 指定 placeholder 的樣式類 | |
| disabled | Boolean | false | 是否禁用 | |
| maxlength | Number | 140 | 最大輸入長度，設置為 -1 的時候不限制最大長度 | |
| cursor-spacing | Number | 0 | 指定光標與鍵盤的距離，單位 px 。取 input 距離底部的距離和 cursor-spacing 指定的距離的最小值作為光標與鍵盤的距離 | |
| auto-focus | Boolean | false | (即將廢棄，請直接使用 focus )自動聚焦，拉起鍵盤 | |
| focus | Boolean | false | 獲取焦點 | |
| confirm-type | String | "done" | 設置鍵盤右下角按鈕的文字 | 1.1.0 |
| confirm-hold | Boolean | false | 點擊鍵盤右下角按鈕時是否保持鍵盤不收起 | 1.1.0 |
| bindinput | EventHandle | 當鍵盤輸入時，觸發input事件，event.detail = {value: value}，處理函數可以直接 return 一個字符串，將替換輸入框的內容。 | ||
| bindfocus | EventHandle | 輸入框聚焦時觸發，event.detail = {value: value} | ||
| bindblur | EventHandle | 輸入框失去焦點時觸發，event.detail = {value: value} | ||
| bindconfirm | EventHandle | 點擊完成按鈕時觸發，event.detail = {value: value} |
type 有效值：
| 值 | 說明 |
|---|---|
| text | 文本輸入鍵盤 |
| number | 數字輸入鍵盤 |
| idcard | 身份證輸入鍵盤 |
| digit | 帶小數點的數字鍵盤 |
confirm-type 有效值：
| 值 | 說明 |
|---|---|
| send | 右下角按鈕為“發送” |
| search | 右下角按鈕為“搜索” |
| next | 右下角按鈕為“下一個” |
| go | 右下角按鈕為“前往” |
| done | 右下角按鈕為“完成” |
示例代碼：
<!--input.wxml--><view class="section"><input placeholder="這是一個可以自動聚焦的input" auto-focus/></view><view class="section"><input placeholder="這個只有在按鈕點擊的時候才聚焦" focus="{{focus}}" /><view class="btn-area"><button bindtap="bindButtonTap">使得輸入框獲取焦點</button></view></view><view class="section"><input maxlength="10" placeholder="最大輸入長度10" /></view><view class="section"><view class="section__title">你輸入的是：{{inputValue}}</view><input bindinput="bindKeyInput" placeholder="輸入同步到view中"/></view><view class="section"><input bindinput="bindReplaceInput" placeholder="連續的兩個1會變成2" /></view><view class="section"><input password type="number" /></view><view class="section"><input password type="text" /></view><view class="section"><input type="digit" placeholder="帶小數點的數字鍵盤"/></view><view class="section"><input type="idcard" placeholder="身份證輸入鍵盤" /></view><view class="section"><input placeholder-style="color:red" placeholder="占位符字體是紅色的" /></view>//input.jsPage({
data:{
focus:false,
inputValue:""
},
bindButtonTap:function(){this.setData({
focus: true
})
},
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'),
}
})bug : 微信版本6.3.30, focus 屬性設置無效；
bug : 微信版本6.3.30, placeholder 在聚焦時出現重影問題；
tip : input 組件是一個 native 組件，字體是系統字體，所以無法設置 font-family；
tip : 在 input 聚焦期間，避免使用 css 動畫；
關于“微信小程序如何獲取輸入框”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“微信小程序如何獲取輸入框”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
