下面是使用maxlength的最简单的解决方案:

<form>
   <input class="form-control" id="code_pin" oninput="if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" maxlength="4">
</form>

您可以添加一个max属性，该属性将指定您可以插入的最大数字

<input type="number" max="999" />

如果你同时添加Max和min值，你可以指定允许值的范围:

<input type="number" min="1" max="999" />

以上仍然不会阻止用户手动输入指定范围之外的值。相反，他会看到一个弹出窗口，告诉他在提交表单时输入一个范围内的值，如下面的截图所示:

与type="number"一样，指定max而不是maxlength属性，这是可能的最大数目。如果是4位数，最大值应该是9999,5位数是99999，以此类推。

另外，如果你想确保它是一个正数，你可以设置min="0"，以确保它是正数。

<input type="number" onchange="this.value=Math.max(Math.min(this.value, 100), -100);" />

或者如果你想什么都不能输入

<input type="number" onchange="this.value=this.value ? Math.max(Math.min(this.value,100),-100) : null" />

我发现你不能使用任何onkeydown, onkeypress或onkeyup事件的完整解决方案，包括移动浏览器。顺便说一下，onkeypress已弃用，不再出现在chrome/opera的android(见:UI事件 W3C工作草案，2016年8月4日)。

我只使用oninput事件找到了一个解决方案。 你可能需要做额外的数字检查，如负号/正号或小数和千个分隔符等，但作为一个开始，以下应该足够了:

函数checkMaxLength(事件){ //准备恢复之前的值 如果这一点。oldValue === undefined) { 这一点。oldValue = this.defaultValue; ｝ 如果(this.value。长度> this.maxLength) { //设置回前一个值 这一点。value = oldVal; ｝ 其他{ //存储之前的值。 这一点。oldValue = this.value; //对+/-或。/等进行额外检查 //同时考虑合并'maxlength' //使用'min'和'max'来防止错误提交。 ｝ ｝

我还建议将maxlength与min和max结合起来，以防止如上所述的错误提交。

更相关的属性是min和max。