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

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

当前回答

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

其他回答

下面的代码将允许用户:

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

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

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

下面是工作代码:

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

我有两种方法

首先:使用type="tel",它将像mobile中的type="number"一样工作,并接受maxlength:

<input type="tel" />

第二:使用一点JavaScript:

<!-- maxlength="2" -->
<input type="tel" onKeyDown="if(this.value.length==2 && event.keyCode!=8) 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

我会让这个快速和容易理解!

使用min= "和max= "代替maxlength for type='number' (maxlength用于定义文本类型中字符串的最大字母数)。

干杯