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="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
其他回答
我曾经遇到过同样的问题,并根据我的需求找到了这个解决方案。 它可能对某人有帮助。
<input type="number" placeholder="Enter 4 Digits" max="9999" min="0"
onKeyDown="if(this.value.length==4 && event.keyCode>47 && event.keyCode < 58)return false;"
/>
快乐编码:)
这也适用于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 type="number" onkeypress="return this.value.length < 4;" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" />
<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
Chrome(技术上,Blink)将不会实现maxlength <input type="number">。
HTML5规范规定maxlength只适用于文本、url、电子邮件、搜索、电话和密码类型。