0
点赞
收藏
分享

微信扫一扫

为什么input中的maxlength属性失效了

左小米z 2022-02-24 阅读 57


今天在遇到限制某个输入框的最大长度的需求,比如一个要求输入手机号的输入框:当时我是这样写的

<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)" />


举报

相关推荐

0 条评论