如何限制HTML5 input type="number"的用户输入字符长度？

如何将 HTML5 中的用户输入限制为给定长度input[type=number]文本框？

的答案

如何限制 HTML5“数字”元素中可能的输入？

不处理非法输入

<input class="quantity" type="number" min="0" max="99999" maxlength="5" />

$("quantity").keyup(function(){
    var $field = $(this);
    if ($field.val().length > Number($field.attr("maxlength"))) {
        var value = $field.val().slice(0, 5);
        $field.val(value);
    }
});

我知道不支持 maxlength 属性，但我用它来获取给定的长度。

上面的代码在 Firefox 中工作正常，但在 chrome 和 safari 中只有当我输入五个“VALID”字符时才有效。当我开始输入任何无效字符时，例如“a”、“b”等，我可以输入更多字母，并且文本框颜色变为红色。

我发现当输入无效时$field.val()始终返回空字符串并且$field.val().length回报0.

我什至尝试将 keyCode 转换为要输入的字符并将其存储在输入框的“data-value”属性中，以检查并覆盖输入的值，但它似乎并不可靠。

有什么解决方案可以让我input[type=number]行为与input[type=text][maxlength=5]?

这是我在测试了一些东西后的建议

1. 它处理多个具有数量类别的字段
2. 它在支持的情况下处理非法输入
3. 通过存储所有来初始化defaultValue具有该类的字段的 s
4. 使用 .index() 处理奇怪的情况
5. 也可在 IE
6. 在 Windows 上的 Safari 5.1 中进行了测试 - 它对 is(":invalid") 作出反应，但在 IE8 中无效

现场演示

var inputQuantity = [];
$(function() {
  $(".quantity").each(function(i) {
    inputQuantity[i]=this.defaultValue;
     $(this).data("idx",i); // save this field's index to access later
  });
  $(".quantity").on("keyup", function (e) {
    var $field = $(this),
        val=this.value,
        $thisIndex=parseInt($field.data("idx"),10); // retrieve the index
    // NOTE :invalid pseudo selector is not valid in IE8 so MUST be last
    if (this.validity && this.validity.badInput || isNaN(val) || $field.is(":invalid") ) { 
        this.value = inputQuantity[$thisIndex];
        return;
    } 
    if (val.length > Number($field.attr("maxlength"))) {
      val=val.slice(0, 5);
      $field.val(val);
    }
    inputQuantity[$thisIndex]=val;
  });      
});