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"/>
当前回答
对于有长度限制的数字输入,您也可以尝试这种方法
<input type="tel" maxlength="4" />
其他回答
这段代码对我来说运行得很好。
在type="number"的输入中,可以添加以下属性:
oninput="constrainUserInput(this.id)"
完整的输入是这样的:
<input type="number" class="test_css" maxlength="4" oninput="constrainUserInput(this.id)" id="flight_number" name="number"/>
注意:必须为这个方法分配输入和ID
然后你可以添加以下JavaScript到你的HTML,它基本上替换任何字符超过你的maxlength属性用一个空引号(本质上删除它们):
function constrainUserInput(id) {
let input = document.getElementById(id);
let value = input.value;
if (value.length > input.maxLength) {
input.value = value.substring(0, input.maxLength);
}
}
我会让这个快速和容易理解!
使用min= "和max= "代替maxlength for type='number' (maxlength用于定义文本类型中字符串的最大字母数)。
干杯
<input type=“number” min=“1” onKeyPress=“if(this.value.length==5) 返回 false”/>
使用类型数字与min和处理max与onKeyPress
<input type="number" min="1" onKeyPress="if(this.value.length==5) return false"/>
下面的代码将允许用户:
只能输入0-999范围内的数字。 这也限制了用户输入不超过3个字符。 当用户输入超过3个字符时,它将清除文本框。
<input type="number" name="test_name" min="0" max="999" oninput="validity.valid||(value='');">
从MDN的文档<input>
如果type属性的值是text、email、search、password、tel或url,则此属性指定用户可以输入的最大字符数(Unicode码位);对于其他控件类型,它将被忽略。
因此maxlength在<input type="number">上被故意忽略。
根据你的需要,你可以像inon在他/她的回答中建议的那样使用min和max属性(注意:这只会定义一个受限的范围,而不是值的实际字符长度,尽管-9999到9999将覆盖所有0-4位数字),或者你可以使用常规文本输入,并使用新模式属性对字段强制验证:
<input type="text" pattern="\d*" maxlength="4">