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"/>
当前回答
对于React用户,
只需将10替换为您的最大长度要求
<input type="number" onInput={(e) => e.target.value = e.target.value.slice(0, 10)}/>
其他回答
<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"/>
对于React用户,
只需将10替换为您的最大长度要求
<input type="number" onInput={(e) => e.target.value = e.target.value.slice(0, 10)}/>
在React上试试吧。
<input
onInput={(e) => {
if (e.target.value.length > e.target.maxLength)
e.target.value = e.target.value.slice(0,e.target.maxLength);
}}
type = "number"
maxlength = {6}
/>
Chrome(技术上,Blink)将不会实现maxlength <input type="number">。
HTML5规范规定maxlength只适用于文本、url、电子邮件、搜索、电话和密码类型。
如果你想在React函数组件中实现它,或者不使用“this”,这里有一种方法。
<input onInput={handleOnInput}/>
const handleOnInput = (e) => {
let maxNum = 4;
if (e.target.value.length > maxNum) {
e.target.value = e.target.value.slice(0, maxNum);
}
};