jquery – 如何限制HTML5输入类型=“数字”的用户输入字符长度？

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

答案

How can I limit possible inputs in a HTML5 “number” element?

不处理非法投入

<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”属性中以检查并覆盖输入的值,但它似乎不可靠.

是否有任何解决方案可以使输入[type = number]与输入[type = text] [maxlength = 5]相同？

解决方法

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

>它使用数量类处理多个字段
>它处理支持的非法输入
>通过使用类存储字段的所有defaultValues来初始化
>使用.index()处理怪异
>也适用于IE< 10
>在Windows上的Safari 5.1中测试 – 它对is(“：无效”)作出反应,但在IE8中无效

Live Demo

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;
  });      
});