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);
  }
};