#### input 輸入框。 | 屬性名 | 類型 | 默認值 | 說明 | 最低版本 | | ----------------- | ----------- | ------------------- | ---------------------------------------- | ---------------------------------------- | | 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](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | confirm-hold | Boolean | false | 點擊鍵盤右下角按鈕時是否保持鍵盤不收起 | [1.1.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | cursor | Number | | 指定focus時的光標位置 | [1.5.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | selection-start | Number | -1 | 光標起始位置，自動聚集時有效，需與selection-end搭配使用 | [1.9.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | selection-end | Number | -1 | 光標結束位置，自動聚集時有效，需與selection-start搭配使用 | [1.9.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | bindinput | EventHandle | | 當鍵盤輸入時，觸發input事件，event.detail = {value, cursor}，處理函數可以直接 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.js Page({ 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 動畫；