input[type=number]下能输入e、+、-的解决方案

@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