@TOC
在我们开发过程中，难免遇到这样的需求，需要一个输入框，并且只能输入数字，不能输入其他任何字符，这时候各种正则校验替换真的是苦不堪言~ 有时候弄得焦头烂额还要被嘲讽le se ... 接下来给大家介绍个神奇的解决方案，走过路过的朋友，有钱的捧个钱场，没钱的捧个人场，点个赞什么的我最喜欢啦；废话说多了，下边请看:
输入框input[type=number]
首先为何输入框input[type=number]能输入e呢？ 究竟这个e是何方神圣，查阅资料得知，原来e = 2.71828...
解决:
在inpu原生事件中把非数字的按键过滤掉，具体操作如下:
onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
// 如:
<input v-model="goPage"
onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
:max="9999999" type="number" placeholder="请输入"></input>
惊不惊喜？意不意外？是不是解决啦 ^ _ ^
作者就是喜欢买一送一！
输入框有自带的上下箭头，即input[type=number]实际上为步距输入框也就是计数器..会有自带的样式，顺带下面附上解决方案...
CSS去默认样式
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"]{
-moz-appearance: textfield;
}
// vue的scope下
/deep/ input::-webkit-outer-spin-button,
/deep/ input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
/deep/ input[type="number"]{
-moz-appearance: textfield;
}
总结：没有什么坑解决不了滴，如果对你有帮助，请点个关注或者喜欢喔
楼主博客安静Eno
楼主github
