在前端开发中,我们经常会遇到用户输入手机号的情况,比如手机号注册、登录,收集用户的手机号信息等。如果我们要想把用户体验做到极致,至少要包含以下两条需求:
1. 输入框只能输入数字
2. 输入框最多只能输入11个字符
通常情况下,开发人员的解决方法就是把input标签的type属性设置为number,这样就限制了输入框只能输入数字类型的字符了,然后添加maxlength="11",限制输入框最多只能输入11个字符。可惜的是,number类型的输入框,不支持maxlength属性。所以两者我们只能取一个,另一个,要用其它的方式来实现。两者,我们选择保留maxlength属性,而第一个需求,我们用其它方式来实现。理由:number类型只能输入数字类型的字符串,但数字类型可不仅仅包括0-9这10个字符,还包括正号、负号、小数点,及字母e(科学计数),所以用number类型并没有完全实现第一条需求。那接下来要做的就是如何自己实现输入框只能输入数字了。
插一点题外话,在测试的过程中,当我们提出一些问题,或是建议的时候,经常会遇到这样的回答:这个东西就是这样的,这个框架就是这样的,言外之意就是:这个需求没法实现,或是没有必要实现。就比如上面的这个问题,使用number类型的输入框,还是可以输入一些非数字,问题反馈给开发,基本上都会说&#x