移动端调起数字键盘的问题

在做移动端调起数字键盘的时候，碰到了不少的问题，在网上找到了方案，但是却不符合我的要求的，现在总结下:

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