如果输入maxlength=5 type=number，则type=number无法工作

Question

这真令人沮丧！

当输入类型为text，而我将maxlength设为5时，则不允许输入超过5个字符。

<input type="text"  maxlength="5" />

如果我将输入类型设为number，将maxlength设为5，那么它是否允许超过5位数字？

<input type="number" maxlength="5" pattern="[0-9]*" />

我是不是遗漏了什么？

PS:这是为移动响应网站！

Answer 1

最新答复。太简单了！

<input type="number" id="nbr"/>

<input type="text"  maxlength="5" />

$(document).on('keypress','#nbr', function(e){
if($(this).val().length >= 5)
   {
       e.preventDefault();
   }

});

Answer 2

使用maxlength代替max

<input type="number" min="1" max="10000" />

更新

小型jQuery插件

(function ($) {
    $.fn.maxlength = function (length) {
        return this.on('keydown', function () {
            var maxlength = length || parseInt($(this).attr('maxlength'), 10) ;
            if (maxlength && $(this).val().length >= maxlength) {
                $(this).val($(this).val().slice(0, maxlength - 1));
            }
        });
    };
}($));

示例

Answer 3

试着用max..。

<input type="number" max="99999" />

编辑：显示验证

<form id='FormValidation'>
<input id="myNum" type="number" min="1" max="99999" />
<input type="text"  maxlength="5" />
    <input type="submit" />
</form>

尝试添加一个大于99999的数字并点击submit，检查更新的小提琴。

这个jquery也能帮上忙。

$('#myNum').keyup( function(e){
    var max = $('#myNum').attr('max').length;
    if ($(this).val().length >= max) { 
        $(this).val($(this).val().substr(0, max));
    }
});