[Vue]移动端number类型的输入框获取value时的怪异表现

在<input type="number">输入框中，除了可以输入数字，还可以输入-(负号)、.(小数点)、e(指数符号)。在Vue开发移动端应用时，如果想要控制用户仅仅可以输入数字，最好的办法就是使用watch:

...
watch: {
    inputVal(newVal){
        // 在这里检查、过滤newVal
    }
}
...

对于追求完美的程序员来说，这样做有一个缺点，就是实际上以上那些符号都是可以输入的，输入完成时会消失，这样就导致体验不太好。如果要求用户输入非法内容时完全没有反应，应该使用@keydown方法。

<input type="number" v-model="inputVal" @keydown="filterInput($event)" />

...
methods: {
    filterInput(e){
        // 在这里对e.data或者e.target.value进行处理
    }
}
...

上面这样做在iOS中表现正常，在安卓中不起作用。在桌面的Chrome中可以发现，输入多个小数点后，e.data或者e.taregt.value的值变为空字符串。其他非法的值——比如输入多个负号——没有试验，但是估计也是一样的。这样就没发在keydown、keyup、input事件中获取到文本框实际上输入的内容。

把input的type改为text，输入框获取到焦点的时候弹出的输入法又不是数字键盘。

所以，目前可以使用watch配合@keydown，至少在iOS中体验更好一些。如果不追求那么完美，只用watch就好了。

End