如何限制HTML5输入类型="数字"的用户输入字符长度？

Question

如何在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]？

Answer 1

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

1. 它处理多个具有数量类别的字段
2. 它在支持的情况下处理非法输入
3. defaultValue通过存储类的所有字段来初始化
4. 使用 .index() 处理奇怪的情况
5. 也可在 IE <10 下运行
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;
  });      
});