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

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

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

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

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

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

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

简单的解决方法，

输入滚动事件 通过键盘复制粘贴 通过鼠标复制粘贴 输入类型等情况 <输入id = " maxLengthCheck " name = " maxLengthCheck " type = "数量" 一步= " 1 " min = " 0 " oninput = "。Value = this。取值为> 5 ?5: Math.abs(this.value)"/>

这是有条件的。值> 5，只需更新5与您的最大限制。

解释:

如果我们的输入数大于我们的极限更新输入值this。Math.abs(this.value) 否则就达到最大限度，也就是5。

最大长度将不能与<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"
 />

//对于Angular，我添加了如下代码片段。 < div ng-app = " " > < >形式 输入数字:<input type="number" ng-model="number" onKeyPress="if(this.value.length==7) return false;" min="0"> > < /形式 <h1>输入:{{number}}</h1> < / div >

如果你使用"onkeypress"事件，那么你在开发(单元测试)时将不会受到任何用户限制。如果你有要求，不允许用户进入特定的限制后，看看这段代码，并尝试一次。

你可以像这样把所有这些组合起来:

<input name="myinput_drs"
oninput="maxLengthCheck(this)"
type = "number"
maxlength = "3"
min = "1"
max = "999" />

<script>
  // This is an old version, for a more recent version look at
  // https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/
  function maxLengthCheck(object)
  {
    if (object.value.length > object.maxLength)
      object.value = object.value.slice(0, object.maxLength)
  }
</script>

更新: 您可能还希望防止输入任何非数字字符，因为object。Length对于数字输入来说是一个空字符串，因此它的长度为0。因此maxLengthCheck函数将不起作用。

解决方案: 看这个或这个例子。

演示-查看完整版本的代码在这里: http://jsfiddle.net/DRSDavidSoft/zb4ft1qq/1/

更新2:下面是更新代码: https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/

更新3: 请注意，允许输入超过一个小数点可能会导致数值混乱。