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

Roc-xb

已于 2024-09-15 06:44:58 修改

阅读量1.7w

点赞数 4

CC 4.0 BY-SA版权

分类专栏：前端文章标签： html5

于 2019-10-24 09:24:51 首次发布

本文链接：https://blog.csdn.net/qq_19309473/article/details/102715719

前端专栏收录该内容

124 篇文章 ¥49.90 ¥99.00

订阅专栏

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

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