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

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

当前回答

您可以使用min和max属性。

下面的代码做同样的事情:

<输入类型=“数字” 最小=“-999” 最大=“9999”/>

其他回答

这也适用于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

对于React用户,

只需将10替换为您的最大长度要求

 <input type="number" onInput={(e) => e.target.value = e.target.value.slice(0, 10)}/>

对于有长度限制的数字输入,您也可以尝试这种方法

<input type="tel" maxlength="4" />

根据我的经验,人们问为什么maxlength被忽略的大多数问题是因为允许用户输入超过“允许”的字符数量。

正如其他注释所述,type="number"输入没有maxlength属性,而是有min和max属性。

要让字段限制可以插入的字符数量,同时允许用户在提交表单之前意识到这一点(否则浏览器应该识别值> max),您必须(至少目前)向该字段添加一个侦听器。

这是我过去使用的一个解决方案:http://codepen.io/wuori/pen/LNyYBM

我可以用这个存档。

<input type="text" onkeydown="javascript: return event.keyCode === 8 || event.keyCode === 46 ? true : !isNaN(Number(event.key))" maxlength="4">