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

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

另一种选择是为任何具有maxlength属性的东西添加一个侦听器，并将切片值添加到其中。假设用户不想在与输入相关的每个事件中使用函数。下面是一个代码片段。忽略CSS和HTML代码，JavaScript才是最重要的。

// Reusable Function to Enforce MaxLength function enforce_maxlength(event) { var t = event.target; if (t.hasAttribute('maxlength')) { t.value = t.value.slice(0, t.getAttribute('maxlength')); } } // Global Listener for anything with an maxlength attribute. // I put the listener on the body, put it on whatever. document.body.addEventListener('input', enforce_maxlength); label { margin: 10px; font-size: 16px; display: block } input { margin: 0 10px 10px; padding: 5px; font-size: 24px; width: 100px } span { margin: 0 10px 10px; display: block; font-size: 12px; color: #666 } <label for="test_input">Text Input</label> <input id="test_input" type="text" maxlength="5"/> <span>set to 5 maxlength</span> <br> <label for="test_input">Number Input</label> <input id="test_input" type="number" min="0" max="99" maxlength="2"/> <span>set to 2 maxlength, min 0 and max 99</span>

假设您希望允许的最大值为1000—可以是键入的，也可以是使用旋转器的。

你可以使用以下方法限制微调器值: Type ="number" min="0" max="1000"

并且用javascript限制键盘输入的内容: onkeyup =“如果(方法(this.value) > 1000){。值= 1000;返回错误;}”

<input type="number" min="0" max="1000" onkeyup="if(parseInt(this.value)>1000){ this.value =1000; return false; }">

我以前遇到过这个问题，我使用html5数字类型和jQuery的组合解决了它。

<input maxlength="2" min="0" max="59" name="minutes" value="0" type="number"/>

脚本:

$("input[name='minutes']").on('keyup keypress blur change', function(e) {
    //return false if not 0-9
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
       return false;
    }else{
        //limit length but allow backspace so that you can still delete the numbers.
        if( $(this).val().length >= parseInt($(this).attr('maxlength')) && (e.which != 8 && e.which != 0)){
            return false;
        }
    }
});

我不知道这些活动是否有点过分，但它解决了我的问题。 JSfiddle

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

<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: 请注意，允许输入超过一个小数点可能会导致数值混乱。

//对于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"事件，那么你在开发(单元测试)时将不会受到任何用户限制。如果你有要求，不允许用户进入特定的限制后，看看这段代码，并尝试一次。