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"/>
当前回答
您可以使用min和max属性。
下面的代码做同样的事情:
<输入类型=“数字” 最小=“-999” 最大=“9999”/>
其他回答
这也适用于Android
更改输入类型为文本,并使用"oninput"事件调用函数:
<input type="text" oninput="numberOnly(this.id);" maxlength="4" id="flight_number" name="number"/>
现在使用Javascript Regex过滤用户输入,并将其限制为数字:
function numberOnly(id) {
// Get element by id which passed as parameter within HTML element event
var element = document.getElementById(id);
// This removes any other character but numbers as entered by user
element.value = element.value.replace(/[^0-9]/gi, "");
}
演示:https://codepen.io/aslami/pen/GdPvRY
对于React用户,
只需将10替换为您的最大长度要求
<input type="number" onInput={(e) => e.target.value = e.target.value.slice(0, 10)}/>
对于有长度限制的数字输入,您也可以尝试这种方法
<input type="tel" maxlength="4" />
根据我的经验,人们问为什么maxlength被忽略的大多数问题是因为允许用户输入超过“允许”的字符数量。
正如其他注释所述,type="number"输入没有maxlength属性,而是有min和max属性。
要让字段限制可以插入的字符数量,同时允许用户在提交表单之前意识到这一点(否则浏览器应该识别值> max),您必须(至少目前)向该字段添加一个侦听器。
这是我过去使用的一个解决方案:http://codepen.io/wuori/pen/LNyYBM
我可以用这个存档。
<input type="text" onkeydown="javascript: return event.keyCode === 8 || event.keyCode === 46 ? true : !isNaN(Number(event.key))" maxlength="4">