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

如何在HTML5

input[type=number]

textbox中将用户输入限制为给定长度

答案

不要处理非法输入

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

$（“数量”）.keyup（函数（）{
var$字段=$（此字段）；
如果（$field.val（）.length>Number（$field.attr（“maxlength”））{
var值=$field.val（）.slice（0,5）；
$field.val（值）；
}
});

我知道maxlength属性不受支持，但我使用它来获得给定的长度

上面的代码在firefox中运行良好，但在chrome和safari中，只有输入五个“有效”字符才能运行。当我开始输入任何无效字符时，例如“a”、“b”等，我可以输入更多的字母，文本框颜色变为红色

我发现当输入无效时，

$field.val（）

总是返回空字符串，

$field.val（）.length

返回

0

我甚至尝试将keyCode转换为用于输入的字符，并将其存储在输入框的“数据值”属性中，以检查并覆盖输入值，但它似乎不可靠

---

是否有任何解决方案可以使

输入[type=number]

的行为与

输入[type=text][maxlength=5]

相同？

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

功能限制（元素）{
var max_chars=2；
如果（element.value.length>max_chars）{
element.value=element.value.substr（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元素不变

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

它使用quantity类处理多个字段

它在支持的地方处理非法输入

通过将所有

defaultValue

s字段与类一起存储来初始化

使用.index（）处理一个奇怪的问题

---

在IE中工作以动态设置最大限制

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

功能限制（元素，最大字符）{
如果（element.value.length>max_chars）{
element.value=element.value.substr（0，最大字符数）；
}
}

Chrome为HTML5特殊输入类型使用内置验证器。在js中将类型更改为“text”是统一行为的解决方案。嗯。。它可能在

Firefox

中工作，因为它可能会默认返回到

type=text

。。这表明Firefox@mplungjan甚至不支持

type=number

，我已经读过了。我还没有资格对答复发表评论。我没有得到我想要的具体答案。事实上，我上面使用的代码就是来自这个问题。但所有这些似乎都指出了原因，但我需要一个解决方案。请帮忙。好的，我现在明白了，我应该把问题读得更透彻一些。这里有一个你可以用的，谢谢！但我们无法检查element.value.length，因为当键入无效字符时，它将返回0。这样条件就不满足了。谢谢，但我也不能这样做。在IOS safari浏览器中输入时，我特意使用输入[type=number]来打开数字屏幕键盘。将其更改回type=text将显示默认的字母数字屏幕键盘。这是我需要通过JS.oh来限制长度的主要原因。这听起来不错，但最后！！非常感谢@mplungjan。这几乎是我想要的。只要稍加修改，我就能得到我想要的。我不能把它全部放在评论里，所以我把它放在小提琴上。非常感谢您的反馈。谢谢有什么方法可以把它放在这里吗？或者你能在你的答案中得到我的更改吗？我再次更新，以处理测试IE时发现的一些意外问题。你在safari中测试过吗？似乎接受了无效字符。我设法使它在任何地方都能工作

if（（this.validity&&this.validity.badInput）|$field.is（“：invalid”）| | isNaN（val））

包括除IOS Safari之外的windows Safari。在IOS Safari中，我们无法替换无效文本框的值。

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