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"/>
当前回答
根据Neha Jain上面的回答,我只是把下面的代码添加到公共区域
$(':input[type="number"]').on('input', function() {
if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);
});
然后你可以像文本类型字段一样使用maxlength="4"。
其他回答
对于有长度限制的数字输入,您也可以尝试这种方法
<input type="tel" maxlength="4" />
Chrome(技术上,Blink)将不会实现maxlength <input type="number">。
HTML5规范规定maxlength只适用于文本、url、电子邮件、搜索、电话和密码类型。
<input type="number" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" onKeyDown="if(this.value.length==10 && event.keyCode!=8) return false;">
演示 - JSFIDDLE
这也适用于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
如何限制输入类型的最大长度
<input name="somename"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
type = "number"
maxlength = "6"
/>