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

其他回答

我写了一个小而干净的解决方案。使用这个函数可以使它正常工作

  const inputHandler = (e) => {
    const { value, maxLength } = e.target;
    if (String(value).length >= maxLength) {
      e.preventDefault();
      return;
    }
  };

例如,它可以在React中这样使用:

<input
  type="number"
  maxlength="4"
  onKeyPress={inputHandler}
/>

input type="number"的最大长度被忽略

这是正确的,请参阅这里的文档

相反,你可以使用type="text",并使用javascript函数只允许数字。

试试这个:

只有一个数字(evt)的功能 var charCode = (evt),什么?evt。事件 如果&& (charCode 31 (charCode > < 48 | | charCode > 57) { return键虚假; 的 回来真; 的 <输入类型=“文本”maxlength=“onkeypress”=“onlyNumber(事件)”>

从MDN的文档<input>

如果type属性的值是text、email、search、password、tel或url,则此属性指定用户可以输入的最大字符数(Unicode码位);对于其他控件类型,它将被忽略。

因此maxlength在<input type="number">上被故意忽略。

根据你的需要,你可以像inon在他/她的回答中建议的那样使用min和max属性(注意:这只会定义一个受限的范围,而不是值的实际字符长度,尽管-9999到9999将覆盖所有0-4位数字),或者你可以使用常规文本输入,并使用新模式属性对字段强制验证:

<input type="text" pattern="\d*" maxlength="4">

许多人张贴的onKeyDown()事件根本不工作,即你不能删除一旦你达到限制。因此,使用onKeyPress()而不是onKeyDown(),它工作得很好。

下面是工作代码:

用户将不允许输入超过4位数字 < br > <input type="number" pattern="/^-?\d+\.? "\d*$/" onKeyPress="if(this.value.length==4) return false;"/>

下面的代码将允许用户:

只能输入0-999范围内的数字。 这也限制了用户输入不超过3个字符。 当用户输入超过3个字符时,它将清除文本框。

<input type="number" name="test_name" min="0" max="999" oninput="validity.valid||(value='');">