5

如何在 HTML5input[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 转换为旨在输入的字符并将其存储在输入框的“数据值”属性中以检查并覆盖输入的值，但它似乎并不可靠。

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

4

4 回答 4

4

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

  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;
  });      
});
于 2013-08-07T13:46:08.940 回答
1

不知道我的回答对你有用吗？但如果我能帮助你，我很高兴。您应该编写一个 js 方法，然后在您的 html 页面中使用它。

function limit(element) {
  var max_chars = 2;

  if(element.value.length > max_chars) {
    element.value = element.value.substr(0, max_chars);
  }
}


<input type="number" onkey ="limit(this);" onkeyup="limit(this);">
于 2013-08-07T13:27:17.230 回答
0

由于没有对 HTML5 输入类型的统一支持，我建议在所有浏览器都支持它们之前使用这个脚本模板。

$(".quantity").each(function() {
    $(this).attr("type", "text")
    var min = $(this).attr("min");
    var max = $(this).attr("max");
    $(this).removeAttr("min").removeAttr("max");
    $(this).keyup(function(){
        var $field = $(this);
        if ($field.val().length > Number($field.attr("maxlength"))) {
            var value = $field.val().slice(0, 5);
            //   add js integer validation here using min and max
            $field.val(value);
        }
    });
});

然后我们可以简单地保持 HTML5 元素不变

于 2013-08-07T13:40:15.297 回答
0

动态设置最大限制

function limit(element,max_chars) {

  if(element.value.length > max_chars) {
    element.value = element.value.substr(0, max_chars);
  }
}


<input type="number" onkey ="limit(this);" onkeyup="limit(this,2);">
于 2014-04-16T05:54:33.427 回答