input maxlength 属性不起作用

大家经常会遇到限制某个输入框的最大长度的需求，比如一个要求输入手机号的输入框：

<input type="text" placeholder="请输入手机号码" maxlength="11" />

如果是上面的写法的话，maxlength属性是有效的。但是type=”text”有一个不好的体验，就是获取焦点后弹出的输入法是默认拼音的那种，不太适合此处要求纯数字的需求。那么自然会想到改为type=”number”，改为后你会奔溃， 竟然发现maxlength属性不起作用了，可以无限地输入。
我们来看下type的属性值：

由上可以看出html5中的新类型：color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel 以及 url。
发现number类型不行后，后面去试了下tel类型，发现maxlength属性又变有效了。


总结：
移动h5开发中遇到输入框需要默认弹出数字键盘，且又不想写代码去控制文本长度的话，可以使用type="tel"配合maxlength="n"，弹出的也是数字键盘不过会存在一个‘-’的固话间隔符号。不过这影响不大的，因为为了可拓展性，肯定还是需要写些js代码去判断内容的有效性，比如正则表达式。
当然不嫌麻烦的话，还是可以用type="number"的，只需在oninput onpropertychange 事件中去截取字符串长度即可。