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

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

答案

如何限制HTML5“数字”元素中的可能输入？

不处理非法投入

  $("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] ？

Answer 1

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

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

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

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