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次正则表达式,坑毁我了简直= =!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容