input type='number'的坑以及如何去除默认的上下箭头

首先来说一下如何隐藏上下箭头:

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}

再来说一下这里碰到的坑,为什么说坑呢?

当设置input 的 type 值为number 的时候,发现在大部分浏览器都不能输入除数字以外的字符,比如汉字什么的,but在苹果手机上确实能随便你输,最最重要的一点是,<b>虽然苹果手机能输入出数字以外的字符,但是它最后都会默认把这些非法字符清空了,一个空字符串。</b>

这样就会造成当你取值的时候取不到(这个还比较好,因为取不到的时候就该写日志看一下为什么了),还有一种比较坑的是,当你直接用正则去验证input的值的时候,验证的不是很准确,为啥?<b>因为对了就对了,错了就置空给你去验证,结果可想而知。</b>当时我验证一个金钱,一直以为正则写的不对,改了N次正则表达式,坑毁我了简直= =!

推荐阅读更多精彩内容