input的那些坑

在web开发中用到input标签的命中率可以媲美买彩票不中奖的概率了，填写姓名、电话、住址、邮箱、身份证信息等等，虽然HTML5已经给了较全面的type类型，然而我要吐槽的就是这些类型的兼容性是多么的糟糕，以下是我遇到的一些问题以及解决办法的总结：

一、number类型槽点：

1、真机上虽然会默认先弹出数字输入法，然而输入数字和字母似乎也并没有什么阻碍，请问你和text类型有啥区别呢（模拟器是没什么问题的）重点来了，

解决办法：<input type="number"  pattern="[0-9]*">对就是加上红色的部分；

2、没错，他还有第二个槽点，不能限制长度，要知道现在这些产品，是恨不得替你填写电话和身份证信息的，用户们那些错误的信息格式休想糊弄过关，他们连电话号码都不会允许让你多输入一位的，有次我一本正经给number加了maxlength=11，马上就被测试找上门，说好了只能输入11位呢，哎，还是技术不够强，改呗

解决办法：this.telValue=this.telValue.slice(0,11)，这里我用的是Vue的@input方法监测value值的变化，只截取前11位显示；

3、还有个小槽点顺便提一下，在pc端使用number类型，右边会出现上下的箭头，很是影响美观，想要去掉也很简单

解决办法： input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type="number"]{ -moz-appearance: textfield; }

二、text的槽点

坦白说这不算text的槽点，这应该是产品的槽点，常常被要求文本框里只能输入中文、数字和字母的组合、字母和中文的组合，其他表情、符号之类的内容连输入进表单的资格都没有，输错了咱可以给提示啊，让用户注意呗，奈何产品才是老大，说一不二！

解决方案：

 

 这是网友的截图，这里借用做示例展示，各人需求不同，这里不做一一赘述，如有需求，自行谷歌