maxlength属性对<input type="number">不起作用。这只发生在Chrome。

<input type="number" class="test_css"  maxlength="4"  id="flight_number" name="number"/>

当前回答

Chrome(技术上,Blink)将不会实现maxlength <input type="number">。

HTML5规范规定maxlength只适用于文本、url、电子邮件、搜索、电话和密码类型。

其他回答

我曾经遇到过同样的问题,并根据我的需求找到了这个解决方案。 它可能对某人有帮助。

<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;"
/>

快乐编码:)

从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">

根据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=“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函数组件中实现它,或者不使用“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);
  }
};