Question

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

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

Answer 1

这是我在测试一些事情之后的建议

它使用数量类
它处理支持的非法输入
通过使用类

defaultValue

使用.index（）
适用于IE＆lt; 10 too
在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;
  });      
});

Answer 2

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

Answer 3

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

Answer 4

动态设置最大限制

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

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

4 个答案: