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

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

当前回答

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

下面是工作代码:

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

最大长度将不能与<input type="number"工作,我知道的最好的方法是使用oninput事件限制最大长度。请看下面的代码。

<input name="somename"
    oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
    type = "number"
    maxlength = "6"
 />

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

输入类型文本和oninput事件与regex只接受数字为我工作。

<input type="text" maxlength="4" oninput="this.value=this.value.replace(/[^0-9]/g,'');" id="myId"/>

<input type="number"> is just that…一个数字输入(尽管不能通过Javascript从字符串转换为浮点数)。

我猜,它不会限制字符的maxLength的关键输入,否则你的用户可能会陷入“关键陷阱”,如果他们忘记了一个小数在开始(尝试放一个。在索引1,当<输入类型"text"> "maxLength" attr已经到达)。然而,如果你设置了max属性,它将在表单提交时验证。

如果试图限制/验证一个电话号码,请使用type="tel" attr/value。它遵从maxLength attr,只显示移动号码键盘(在现代浏览器中),你可以将输入限制为一个模式(即pattern="[0-9]{10}")。