在做移動(dòng)端調(diào)起數(shù)字鍵盤的時(shí)候，碰到了不少的問題，在網(wǎng)上找到了方案，但是卻不符合我的要求的，現(xiàn)在總結(jié)下:

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

2.使用input type為text的類型，這種使用正則可以允許只填寫價(jià)格的正則表達(dá)式，但是無法調(diào)起數(shù)字鍵盤

3.使用input type為tel的類型，這種可以調(diào)起數(shù)字鍵盤，在結(jié)合上面的正則表達(dá)式，可以做到滿足我的需求驗(yàn)證價(jià)格

//需要驗(yàn)證的表單 <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')" //驗(yàn)證表單的方法 isNumber (name) {//判斷要驗(yàn)證的值是否是小于0和是否是數(shù)字，不是數(shù)字清空if(this.accountsArg[name] < 0 || isNaN(this.accountsArg[name])){this.accountsArg[name] = '';}//保留小數(shù)點(diǎn)后兩位var arg = this.accountsArg[name].split('.');if(arg[1] && arg[1].length >= 3){this.accountsArg[name] = arg[0] + '.' + arg[1].substr(0,2);}}//正則驗(yàn)證的方法changeInput (name) {let regPrice = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/,regPriceFloat = /^((\d{1,10})|0)(\.)$/;//regPriceFloat是為了驗(yàn)證以.結(jié)尾的時(shí)候進(jìn)行匹配，因?yàn)閞egPrice在@input事件中以.結(jié)尾時(shí)無法匹配if (!regPrice.test(this.accountsArg[name]) && !regPriceFloat.test(this.accountsArg[name])) {this.accountsArg[name] = '';}}

以上代碼只是符合個(gè)人需求

參考文檔:

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。