手机号输入框的优化

在前端开发中，我们经常会遇到用户输入手机号的情况，比如手机号注册、登录，收集用户的手机号信息等。如果我们要想把用户体验做到极致，至少要包含以下两条需求：

1. 输入框只能输入数字

2. 输入框最多只能输入11个字符

通常情况下，开发人员的解决方法就是把input标签的type属性设置为number，这样就限制了输入框只能输入数字类型的字符了，然后添加maxlength="11"，限制输入框最多只能输入11个字符。可惜的是，number类型的输入框，不支持maxlength属性。所以两者我们只能取一个，另一个，要用其它的方式来实现。两者，我们选择保留maxlength属性，而第一个需求，我们用其它方式来实现。理由：number类型只能输入数字类型的字符串，但数字类型可不仅仅包括0-9这10个字符，还包括正号、负号、小数点，及字母e（科学计数），所以用number类型并没有完全实现第一条需求。那接下来要做的就是如何自己实现输入框只能输入数字了。

插一点题外话，在测试的过程中，当我们提出一些问题，或是建议的时候，经常会遇到这样的回答：这个东西就是这样的，这个框架就是这样的，言外之意就是：这个需求没法实现，或是没有必要实现。就比如上面的这个问题，使用number类型的输入框，还是可以输入一些非数字，问题反馈给开发，基本上都会说&#x