跳至正文

input 的 type 设置为 number 时,maxlength 无效

  • 前端

以下有效:

<input type="text" maxlength="11" />

当 input type="number" 时 maxlength 失效,长度可以无限输入。

<input type="number" maxlength="11" />

解决方案一:

将 type 类型修改为 tel

在移动端中,属性 type="number",会唤起系统的数字键盘;

属性 type="tel",会唤起电话键盘(不是数字键盘,两者并不一样,电话键盘还包括*和#);

type="email" 的时候,会出现带 @ 和 .com 符号的全键盘 (各设配各系统实现貌似有差异);

<input type="tel" maxlength="11" />

解决方案二:

如果必须要将 type 设置为 number 类型,使用 outinput 就可以啦:

<input type="number" name="phone" id="phone" value="phone" oninput="if(value.length>11)value=value.slice(0,11)" />