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 事件中去截取字符串长度即可。

猜你喜欢

转载自blog.csdn.net/u012982629/article/details/80588438