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

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

如果同时添加 max 和 min 值，则可以指定允许值的范围：

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

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

https://i.stack.imgur.com/z0OHu.png

---

您可以指定 min 和 max 属性，这将只允许在特定范围内输入。

<!-- equivalent to maxlength=4 -->
<input type="number" min="-9999" max="9999">

但是，这只适用于微调器控制按钮。尽管用户可以键入大于允许的 max 的数字，但表单不会提交。

https://i.stack.imgur.com/7WtAa.png

您可以在 JavaScript 中使用 HTML5 oninput 事件来限制字符数：

myInput.oninput = function () {
    if (this.value.length > 4) {
        this.value = this.value.slice(0,4); 
    }
}

---

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

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

---

您可以像这样组合所有这些：

<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 函数将不起作用。

解决方案：
有关示例，请参见 this 或 this。

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

更新 2： 这是更新代码：https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/

更新 3：请注意，允许输入多个小数点可能会弄乱数值。

---

或者，如果您的最大值为 99 且最小值为 0，您可以将其添加到输入元素（您的值将被您的最大值等重写）

<input type="number" min="0" max="99" 
   onKeyUp="if(this.value>99){this.value='99';}else if(this.value<0){this.value='0';}"
id="yourid">

然后（如果你愿意），你可以检查是否输入了真正的数字

---

很简单，用一些 javascript 你可以模拟一个maxlength，看看：

//maxlength="2"
<input type="number" onKeyDown="if(this.value.length==2) return false;" />

---

您可以将其指定为文本，但添加仅匹配数字的 pettern：

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

它可以完美运行，并且在移动设备上（在 iOS 8 和 Android 上测试过）会弹出数字键盘。

---

假设您希望最大允许值为 1000 - 键入或使用微调器。

您可以使用以下方法限制微调器值：type="number" min="0" max="1000"

并使用 javascript 限制键盘输入的内容：onkeyup="if(parseInt(this.value)>1000){ this.value =1000; return false; }"

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

---

//对于 Angular，我附上了以下代码片段。

如果您使用“onkeypress”事件，那么在开发时您将不会受到任何用户限制（对其进行单元测试）。如果您有要求不允许用户在特定限制后进入，请查看此代码并尝试一次。

---

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

// 强制执行 MaxLength 的可重用函数 function enforce_maxlength(event) { var t = event.target; if (t.hasAttribute('maxlength')) { t.value = t.value.slice(0, t.getAttribute('maxlength')); } } // 任何具有 maxlength 属性的全局监听器。 // 我把监听器放在身体上，把它放在任何东西上。 document.body.addEventListener('input', enforce_maxlength);标签{边距：10px；字体大小：16px；显示：块}输入{边距：0 10px 10px；填充：5px；字体大小：24px；宽度：100px } 跨度 { 边距：0 10px 10px;显示：块；字体大小：12px； color: #666 } 文本输入 设置为5 maxlength < br> 数字输入 设置为2 最大长度，最小 0 和最大 99

---

最大长度不适用于 <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"
 />

---

将起作用的简单解决方案，

输入滚动事件

通过键盘复制粘贴

鼠标复制粘贴

输入类型等情况

查看 this.value > 5 的条件，只需将 5 更新为您的最大限制。

解释：

如果我们的输入数字大于我们的限制更新输入值 this.value 与适当的数字 Math.abs(this.value)

否则，只需达到您的最大限制，即 5。

---

正如其他人所说， min/max 与 maxlength 不同，因为人们仍然可以输入一个大于您预期的最大字符串长度的浮点数。要真正模拟 maxlength 属性，您可以在紧要关头做这样的事情（这相当于 maxlength="16"）：

<input type="number" oninput="if(value.length>16)value=value.slice(0,16)">

---

我之前遇到过这个问题，我使用 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

---

Maycow Moura 的回答是一个好的开始。但是，他的解决方案意味着当您输入第二个数字时，该字段的所有编辑都会停止。因此，您不能更改值或删除任何字符。

以下代码在 2 处停止，但允许继续编辑；

//MaxLength 2
onKeyDown="if(this.value.length==2) this.value = this.value.slice(0, - 1);"

---

为数字输入设置 maxlength 的一种简单方法是：

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

---

HTML 输入

 <input class="minutesInput" type="number" min="10" max="120" value="" />

jQuery

 $(".minutesInput").on('keyup keypress blur change', function(e) {

    if($(this).val() > 120){
      $(this).val('120');
      return false;
    }

  });

---

啊。这就像有人在实施它的过程中放弃了一半，并认为没有人会注意到。

无论出于何种原因，上面的答案都没有使用 min 和 max 属性。这个 jQuery 完成了它：

    $('input[type="number"]').on('input change keyup paste', function () {
      if (this.min) this.value = Math.max(parseInt(this.min), parseInt(this.value) || 0);
      if (this.max) this.value = Math.min(parseInt(this.max), parseInt(this.value) || 0);
    });

如果您是其中一种“jQuery-is-the-devil”类型，它可能也可以用作不带 jQuery 的命名函数“oninput”。

---

与 type="number" 一样，您指定 max 而不是 maxlength 属性，这是可能的最大数量。所以对于 4 位数字，max 应该是 9999，5 位数字 99999 等等。

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

---

您也可以尝试对具有长度限制的数字输入进行此操作

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

---

<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 for android 中（请参阅：UI Events W3C Working Draft, 04 August 2016）。

我想出了一个仅使用 oninput 事件的解决方案。您可能需要根据需要进行额外的数字检查，例如负/正号或小数和千位分隔符等，但首先以下内容就足够了：

function checkMaxLength(event) { // 准备恢复之前的值。 if (this.oldValue === undefined) { this.oldValue = this.defaultValue; } if (this.value.length > this.maxLength) { // 设置回之前的值。 this.value = oldVal; } else { // 存储前一个值。 this.oldValue = this.value; // 对 +/- 或 ./ 等进行额外检查。 // 还要考虑将 'maxlength' // 与 'min' 和 'max' 结合起来，以防止错误提交。 } }

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

---

    <input type="number" maxlength="6" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);">

这对我有用，没有问题

---

要使用的更相关的属性是 min 和 max。

---

我知道已经有了答案，但是如果您希望输入的行为与 maxlength 属性完全相同或尽可能接近，请使用以下代码：

(function($) {
 methods = {
    /*
     * addMax will take the applied element and add a javascript behavior
     * that will set the max length
     */
    addMax: function() {
        // set variables
        var
            maxlAttr = $(this).attr("maxlength"),
            maxAttR = $(this).attr("max"),
            x = 0,
            max = "";

        // If the element has maxlength apply the code.
        if (typeof maxlAttr !== typeof undefined && maxlAttr !== false) {

            // create a max equivelant
            if (typeof maxlAttr !== typeof undefined && maxlAttr !== false){
                while (x < maxlAttr) {
                    max += "9";
                    x++;
                }
              maxAttR = max;
            }

            // Permissible Keys that can be used while the input has reached maxlength
            var keys = [
                8, // backspace
                9, // tab
                13, // enter
                46, // delete
                37, 39, 38, 40 // arrow keys<^>v
            ]

            // Apply changes to element
            $(this)
                .attr("max", maxAttR) //add existing max or new max
                .keydown(function(event) {
                    // restrict key press on length reached unless key being used is in keys array or there is highlighted text
                    if ($(this).val().length == maxlAttr && $.inArray(event.which, keys) == -1 && methods.isTextSelected() == false) return false;
                });;
        }
    },
    /*
     * isTextSelected returns true if there is a selection on the page. 
     * This is so that if the user selects text and then presses a number
     * it will behave as normal by replacing the selection with the value
     * of the key pressed.
     */
    isTextSelected: function() {
       // set text variable
        text = "";
        if (window.getSelection) {
            text = window.getSelection().toString();
        } else if (document.selection && document.selection.type != "Control") {
            text = document.selection.createRange().text;
        }
        return (text.length > 0);
    }
};

$.maxlengthNumber = function(){
     // Get all number inputs that have maxlength
     methods.addMax.call($("input[type=number]"));
 }

})($)

// Apply it:
$.maxlengthNumber();

---

我对所有输入使用一个简单的解决方案（使用 jQuery）：

$(document).on('input', ':input[type="number"][maxlength]', function () {
    if (this.value.length > this.maxLength) {
        this.value = this.value.slice(0, this.maxLength); 
    }
});

代码选择 maxlength 已定义的所有输入 type="number" 元素。

---

由于我希望验证并且只允许整数，因此我采用了现有答案之一并对其进行了改进

这个想法是从 1 到 12 进行验证，如果输入低于 1，它将被设置为 1，如果输入高于 12，它将被设置为 12。不允许使用十进制符号。

<input id="horaReserva" type="number" min="1" max="12" onkeypress="return isIntegerInput(event)" oninput="maxLengthCheck(this)">

function maxLengthCheck(object) {
    if (object.value.trim() == "") {

    }
    else if (parseInt(object.value) > parseInt(object.max)) {
        object.value = object.max ;
    }
    else if (parseInt(object.value) < parseInt(object.min)) {
        object.value = object.min ;
    }
}

function isIntegerInput (evt) {
    var theEvent = evt || window.event;
    var key = theEvent.keyCode || theEvent.which;
    key = String.fromCharCode (key);
    var regex = /[0-9]/;
    if ( !regex.test(key) ) {
        theEvent.returnValue = false;

        if(theEvent.preventDefault) {
            theEvent.preventDefault();
        }
    }
}

---

如果有人在 React 中遇到这个问题，我发现的最简单的解决方案是使用 onChange 函数，如下所示：

    const [amount, setAmount] = useState("");
    
   return(
    <input onChange={(e) => {
    setAmount(e.target.value);
    if (e.target.value.length > 4) {
         setAmount(e.target.value.slice(0, 4));
    }
    }} value={amount}/>)

所以这基本上是它接受输入的值，如果输入值长度大于 4，它会切掉它后面的所有数字，所以你只能得到前 4 个数字（当然你可以改变你可以改变的数字数量通过更改代码中的所有 4 来键入）。我希望这对任何在这个问题上苦苦挣扎的人有所帮助。此外，如果您想了解 slice 方法 的用途，可以查看out here

---

这可能会帮助某人。

使用一点 javascript，您可以搜索所有日期时间本地输入，搜索用户尝试输入的年份是否超过 100 年：

$('input[type=datetime-local]').each(function( index ) {

    $(this).change(function() {
      var today = new Date();
      var date = new Date(this.value);
      var yearFuture = new Date();
      yearFuture.setFullYear(yearFuture.getFullYear()+100);

      if(date.getFullYear() > yearFuture.getFullYear()) {

        this.value = today.getFullYear() + this.value.slice(4);
      }
    })
  });

---

这是使用 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>

---