maxlength属性对<input type="number">不起作用。这只发生在Chrome。
<input type="number" class="test_css" maxlength="4" id="flight_number" name="number"/>
maxlength属性对<input type="number">不起作用。这只发生在Chrome。
<input type="number" class="test_css" maxlength="4" id="flight_number" name="number"/>
当前回答
根据我的经验,人们问为什么maxlength被忽略的大多数问题是因为允许用户输入超过“允许”的字符数量。
正如其他注释所述,type="number"输入没有maxlength属性,而是有min和max属性。
要让字段限制可以插入的字符数量,同时允许用户在提交表单之前意识到这一点(否则浏览器应该识别值> max),您必须(至少目前)向该字段添加一个侦听器。
这是我过去使用的一个解决方案:http://codepen.io/wuori/pen/LNyYBM
其他回答
<input type="number"> is just that…一个数字输入(尽管不能通过Javascript从字符串转换为浮点数)。
我猜,它不会限制字符的maxLength的关键输入,否则你的用户可能会陷入“关键陷阱”,如果他们忘记了一个小数在开始(尝试放一个。在索引1,当<输入类型"text"> "maxLength" attr已经到达)。然而,如果你设置了max属性,它将在表单提交时验证。
如果试图限制/验证一个电话号码,请使用type="tel" attr/value。它遵从maxLength attr,只显示移动号码键盘(在现代浏览器中),你可以将输入限制为一个模式(即pattern="[0-9]{10}")。
您可以使用min和max属性。
下面的代码做同样的事情:
<输入类型=“数字” 最小=“-999” 最大=“9999”/>
input type="number"的最大长度被忽略
这是正确的,请参阅这里的文档
相反,你可以使用type="text",并使用javascript函数只允许数字。
试试这个:
只有一个数字(evt)的功能 var charCode = (evt),什么?evt。事件 如果&& (charCode 31 (charCode > < 48 | | charCode > 57) { return键虚假; 的 回来真; 的 <输入类型=“文本”maxlength=“onkeypress”=“onlyNumber(事件)”>
我写了一个小而干净的解决方案。使用这个函数可以使它正常工作
const inputHandler = (e) => {
const { value, maxLength } = e.target;
if (String(value).length >= maxLength) {
e.preventDefault();
return;
}
};
例如,它可以在React中这样使用:
<input
type="number"
maxlength="4"
onKeyPress={inputHandler}
/>
如何限制输入类型的最大长度
<input name="somename"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
type = "number"
maxlength = "6"
/>