下面是使用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" />

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

你可以将它指定为文本，但要添加只匹配数字的pettern:

<input type="text" pattern="\d*" maxlength="2">

它非常完美，而且在移动设备上(在iOS 8和Android上进行了测试)，数字键盘也会弹出。

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

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

设置数字输入的maxlength的一个简单方法是:

<input type="number" onkeypress="return this.value.length < 4;" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" />

如果您正在寻找一种移动Web解决方案，希望用户看到数字键盘而不是全文键盘。使用类型=“电话”。它将与maxlength一起工作，这将节省您创建额外的javascript。

Max和Min仍然允许用户输入超过Max和Min的数字，这不是最佳的。