今天在遇到限制某个输入框的最大长度的需求,比如一个要求输入手机号的输入框:当时我是这样写的
<input type="text" placeholder="请输入手机号码" maxlength="11" />
如果是上面的这种写法的话,maxlength属性是有效的。但是type=”text”有一个不好的体验,就是获取焦点后弹出的输入法是默认拼音的那种,不太适合此处要求纯数字的需求。那么自然会想到改为type=”number”,改为后你会奔溃, 竟然发现maxlength属性不起作用了,可以无限地输入,明明number是限制数字,为什么长度会失效呢,刨根问底。
经过查阅相关资料,最终总结出以下内容:
在html5中的新增的type类型包含:color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel 以及 url。 发现number类型不行后,后面去试了下tel类型,发现maxlength属性又变有效了,不过这样并不是很好。
最终我得到的解决方法如下:
<input type="number" placeholder="请输入手机号码" oninput="if(value.length>11)value=value.slice(0,11)" />