input 輸入框 · uniapp

> 輸入框是最為常見的組建之一，所以本文著重介紹下 ## 屬性說明 | 屬性名 | 類型 | 默認值 | 說明 | 平臺差異說明 | | --- | --- | --- | --- | --- | | value | String | | 輸入框的初始內容 | | | type | String | text | input 的類型 | H5 暫未支持動態切換請使用 v-if 進行整體切換 | | 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 指定的距離的最小值作為光標與鍵盤的距離 | App、微信小程序、百度小程序、QQ小程序 | | focus | Boolean | false | 獲取焦點。 | 在 H5 平臺能否聚焦以及軟鍵盤是否跟隨彈出，取決于當前瀏覽器本身的實現。 | | confirm-type | String | done | 設置鍵盤右下角按鈕的文字，僅在 type="text" 時生效。 | | | confirm-hold | Boolean | false | 點擊鍵盤右下角按鈕時是否保持鍵盤不收起 | App、微信小程序、支付寶小程序、百度小程序、QQ小程序 | | cursor | Number | | 指定focus時的光標位置 | | | selection-start | Number | \-1 | 光標起始位置，自動聚集時有效，需與selection-end搭配使用 | | | selection-end | Number | \-1 | 光標結束位置，自動聚集時有效，需與selection-start搭配使用 | | | adjust-position | Boolean | true | 鍵盤彈起時，是否自動上推頁面 | App-Android（vue 頁面 softinputMode 為 adjustResize 時無效）、微信小程序、百度小程序、QQ小程序 | | hold-keyboard | boolean | false | focus時，點擊頁面的時候不收起鍵盤 | 微信小程序2.8.2 | | @input | EventHandle | | 當鍵盤輸入時，觸發input事件，event.detail = {value} | 差異見下方 Tips | | @focus | EventHandle | | 輸入框聚焦時觸發，event.detail = { value, height }，height 為鍵盤高度 | 僅微信小程序、App（2.2.3+）、QQ小程序支持 height | | @blur | EventHandle | | 輸入框失去焦點時觸發，event.detail = {value: value} | | | @confirm | EventHandle | | 點擊完成按鈕時觸發，event.detail = {value: value} | ? | | @keyboardheightchange | eventhandle | | 鍵盤高度發生變化的時候觸發此事件，event.detail = {height: height, duration: duration} | 微信小程序2.7.0 | ## type 有效值 | 值 | 說明 | 平臺差異說明 | | --- | --- | --- | | text | 文本輸入鍵盤 | | | number | 數字輸入鍵盤 | 均支持，注意iOS上app-vue彈出的數字鍵盤并非9宮格方式 | | idcard | 身份證輸入鍵盤 | 微信、支付寶、百度、QQ小程序 | | digit | 帶小數點的數字鍵盤 | App的nvue頁面、微信、支付寶、百度、頭條、QQ小程序 | ## confirm-type 有效值 | 值 | 說明 | 平臺差異說明 | | --- | --- | --- | | send | 右下角按鈕為“發送” | 微信、支付寶、百度小程序、App的nvue | | search | 右下角按鈕為“搜索” | | | next | 右下角按鈕為“下一個” | 微信、支付寶、百度小程序、App的nvue | | go | 右下角按鈕為“前往” | | | done | 右下角按鈕為“完成” | 微信、支付寶、百度小程序、App的nvue | ## 隱藏輸入框鍵盤 ~~~ uni.hideKeyboard(); ~~~ ## 代碼示例 > test.nvue ~~~ <template> <view> <view class="uni-common-mt"> <view class="uni-column"> <view class="title">可自動聚焦的input</view> <input class="uni-input" focus placeholder="自動獲得焦點" /> </view> <view class="uni-column"> <view class="title">鍵盤右下角按鈕顯示為搜索</view> <input class="uni-input" confirm-type="search" placeholder="鍵盤右下角按鈕顯示為搜索" /> </view> <view class="uni-column"> <view class="title">控制最大輸入長度的input</view> <input class="uni-input" maxlength="10" placeholder="最大輸入長度為10" /> </view> <view class="uni-column"> <view class="title">實時獲取輸入值：{{inputValue}}</view> <input class="uni-input" @input="onKeyInput" placeholder="輸入同步到view中" /> </view> <view class="uni-column"> <view class="title">控制輸入的input</view> <input class="uni-input" @input="replaceInput" v-model="changeValue" placeholder="連續的兩個1會變成2" /> </view>  <view class="uni-column"> <view class="title">控制鍵盤的input</view> <input class="uni-input" ref="input1" @input="hideKeyboard" placeholder="輸入123自動收起鍵盤" /> </view>  <view class="uni-column"> <view class="title">數字輸入的input</view> <input class="uni-input" type="number" placeholder="這是一個數字輸入框" /> </view> <view class="uni-column"> <view class="title">密碼輸入的input</view> <input class="uni-input" password type="text" placeholder="這是一個密碼輸入框" /> </view> <view class="uni-column"> <view class="title">帶小數點的input</view> <input class="uni-input" type="digit" placeholder="帶小數點的數字鍵盤" @confirm="numberDone" /> </view>  <view class="uni-column"> <view class="title">身份證輸入的input</view> <input class="uni-input" type="idcard" placeholder="身份證輸入鍵盤" /> </view>  <view class="uni-column"> <view class="title">控制占位符顏色的input</view> <input class="uni-input" adjust-position="false" placeholder-style="color:#F76260" placeholder="占位符字體是紅色的,并且鍵盤不會上推頁面" /> </view> </view> </view> </template> <script> export default { data() { return { title: 'input', focus: false, inputValue: '', changeValue: '' } }, methods: { onKeyInput: function(event) { this.inputValue = event.target.value }, replaceInput: function(event) { var value = event.target.value; if (value === '11') { this.changeValue = '2'; } }, hideKeyboard: function(event) { if (event.target.value === '123') { uni.hideKeyboard(); } }, numberDone: function(event) { console.log(event) uni.hideKeyboard(); } } } </script> ~~~