如何限制HTML5输入类型=“数字”的用户输入字符长度？-Java 学习之路

如何在HTML5 input[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”属性中以检查并覆盖输入的值，但它似乎不可靠 .

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

4 回答

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

它使用数量类处理多个字段
它处理支持的非法输入
通过使用类存储所有字段的 defaultValue 来初始化
用.index（）处理怪异
也在IE <10中工作
在Windows上的Safari 5.1中进行了
测试 - 它对is（":invalid"）有反应，但在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;
  });      
});

回复于 2024-04-20T14:39:07+08:00

我不知道我的回答对你有用吗？但我很高兴，如果我能帮助你 . 你应该编写一个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);">

回复于 2024-04-20T14:39:07+08:00

由于没有对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元素不变

回复于 2024-04-20T14:39:07+08:00

动态设置最大限制

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

回复于 2024-04-20T14:39:07+08:00

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

4 回答

相关问题