在做移動端調起數字鍵盤的時候，碰到了不少的問題，在網上找到了方案，但是卻不符合我的要求的，現在總結下:

1.使用input type為number的類型，這種確實可以調起數字鍵盤，但是存在以下問題，會忽略掉點(.)，這樣會導致正則無法匹配的問題，另外我在v-model中綁定的值被清空了，但是無法修改視圖，修改type為text類型就可以

2.使用input type為text的類型，這種使用正則可以允許只填寫價格的正則表達式，但是無法調起數字鍵盤

3.使用input type為tel的類型，這種可以調起數字鍵盤，在結合上面的正則表達式，可以做到滿足我的需求驗證價格

//需要驗證的表單 <input class="setup-list-right setup-list-color" type="tel" v-model="accountsArg.amount_total" @input="isNumber('amount_total')" :placeholder="$t('message.Cash.qsrskje')"> //可以使用@input="isNumber('amount_total')" 或 @input="changeInput('amount_total')" //驗證表單的方法 isNumber (name) {//判斷要驗證的值是否是小于0和是否是數字，不是數字清空if(this.accountsArg[name] < 0 || isNaN(this.accountsArg[name])){this.accountsArg[name] = '';}//保留小數點后兩位var arg = this.accountsArg[name].split('.');if(arg[1] && arg[1].length >= 3){this.accountsArg[name] = arg[0] + '.' + arg[1].substr(0,2);}}//正則驗證的方法changeInput (name) {let regPrice = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/,regPriceFloat = /^((\d{1,10})|0)(\.)$/;//regPriceFloat是為了驗證以.結尾的時候進行匹配，因為regPrice在@input事件中以.結尾時無法匹配if (!regPrice.test(this.accountsArg[name]) && !regPriceFloat.test(this.accountsArg[name])) {this.accountsArg[name] = '';}}

以上代碼只是符合個人需求

參考文檔:

https://www.cnblogs.com/chris-oil/p/5001748.html
https://blog.csdn.net/qq_22509715/article/details/78993912

總結

以上是生活随笔為你收集整理的移动端调起数字键盘的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。