场景：
<input type="number" v-model="inputVal" />
基于vue框架进行操作获取v-model中的绑定data属性"inputVal"，因为input type="number" 此时可输入字符“e”或“.”，因为e和小数点都输入数字范畴。当我们输入e获取"inputVal"的值时，获取的内容为空。 当我们输入小数点且满足数字范畴时展示正确。若输入多个小数点儿返回的"inputVal"为空。一般我们设置输入框type="number"的场景为输入手机号 银行卡号 或者国家编码等，我所遇见的场景就是如此，所以需要输入的是纯数字。因此为了限制输入可增加如下代码：
onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
//event.keyCode 是得到用户按下哪个键的unicode值，然后将其转成字符，比如在没有输入的地方，你按下字母a，event.keyCode得到a的编码
然后将其转化成a,输入数字则转化为数字。以此过滤非数字的输入
keypress只是保证输入时去过滤这些字符，无法保证粘贴的操作。为此，我们对粘贴回来的输入内容进行正确的正则校验来完成此需求实现。
完整实现代码如下：
<template>
<input
placeholder="请输入手机号"
v-model="contactPhone"
onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
@blur="contactPhoneBlur"
>
</template>
<script>
export default {
methods: {
contactPhoneBlur() {
let reg = this.contactPhoneReg;
if (this.contactPhone === "") {
this.notPassContactPhone = false;
} else {
this.notPassContactPhone = !reg.test(this.contactPhone);
}
}
}
}
</script>
