<input type="number">

1.问题

在开发微信公众号是，需要实现一个提现的功能。只能输入数字，并且获取焦点的时候弹出数字键盘，并且在输入的过程中验证输入是否合法。选择使用<input type="number">实现。并且在输入时监听，使用正则检验是否合法。发现无法检测到输入了小数点，从而无法检测是否合法（例如输入3.的时候应该是不合法输入）。通过调试发现在chrom浏览器上，type=number是非法

image

2.关于type=number

2.1 允许小数值

设置step=0.01 例如4.11是合法但是4.111位不合法输入当有不合法输入时，chrome会将不合法部分替换为"" 故程序无法监测数据发生了改变。
在iphone上输入小数点是合法，所以在android和iphone上表现不一样

<input type="number" placeholder="1.0" step="0.01">

3.统一两种浏览器表现

使用keyup事件监测是否输入了小数点，在输入小数点的时候，将数据赋值给另一个变量，
并将这个变量转化成字符串，然后对这个字符串使用正则检测是否合法。

<!-- 监听键盘上的小数点 -->
<input type="number" class='ipt-num' 
       v-model="amount" step="0.01" @keyup.190.110="handleKeyUp($event)">
       
       
handleKeyUp(e) {
    <!-- 转化成字符串  并加上小数点 -->
    let temp = this.amount + '.'
    <!-- 使用函数检测数值是否合法 -->
    checkAmount(temp)
}