如果輸入類型=數字，maxlength = 5不起作用

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

代替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 2

嘗試使用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));
    }
});

Answer 3

用max替換maxlength

 // Max Length = 5
<input type="number" max="99999" />
// length between 1 to 5
<input type="number" min="1" max="99999" />

Answer 4

更新了答案。 太簡單了！

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

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

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

});

Answer 5

並且您可以添加一個max屬性，該屬性將指定您可以插入的最大數字

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

如果同時添加最大值和最小值，則可以指定允許值的范圍：

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