相关疑难解决方法(0)

对于<input type="number">元素,maxlength不起作用.如何限制该maxlength数字元素？

如何在HTML5 input[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转换为用于输入的字符并将其存储在输入框的"data-value"属性中以检查并覆盖输入的值,但它似乎不可靠.

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

我喜欢最大长度为3的输入.

这些输入值应该只是数字而不是字母.

通过参考这篇文章:为什么<input type ="number"maxlength ="3">在Safari中不起作用？你可以看到我无法使用 <input type="numbers">

那么如何防止text-input-element中的字母呢？