maxlength игнорируется для типа ввода= "число" в Chrome

максимальная длина не будет работать с <input type="number" лучший способ, который я знаю, это использовать oninput событие ограничения параметр maxlength. Пожалуйста, смотрите ниже код.

<input name="somename"
    oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
    type = "number"
    maxlength = "6"
 />

можно использовать мин и макс атрибуты.

следующий код делает то же самое:

<input type="number" min="-999" max="9999"/>

у меня есть два способа сделать это

Во-Первых: Используйте type="tel" он будет работать, как type="number" в мобильном телефоне и принять maxlength:

<input type="tel" />

во-вторых: используйте немного JavaScript:

<!-- maxlength="2" -->
<input type="tel" onKeyDown="if(this.value.length==2 && event.keyCode!=8) return false;" />

многие ребята выложили onKeyDown() событие, которое не работает на всех, т. е. вы не можете удалить, как только вы достигнете предела. Так что вместо onKeyDown() использовать onKeyPress() и он отлично работает. Ниже приведен рабочий код:

User will not be allowed to enter more than 4 digits
<br>
<input type="number" pattern="/^-?\d+\.?\d*$/" onKeyPress="if(this.value.length==4) return false;" />

однажды я столкнулся с той же проблемой и нашел это решение в отношении моих потребностей. Это может кому-то помочь.

<input type="number" placeholder="Enter 4 Digits" max="9999" min="0" 
onKeyDown="if(this.value.length==4 && event.keyCode>47 && event.keyCode < 58)return false;"
/>

Удачи В Кодировании :)

вы можете попробовать это также для числового ввода с ограничением длины

<input type="tel" maxlength="4" />

измените тип ввода на текст и используйте событие "oninput" для вызова функции:

<input type="text" oninput="numberOnly(this.id);" class="test_css" maxlength="4" id="flight_number" name="number"/>

теперь используйте регулярное выражение Javascript для фильтрации пользовательского ввода и ограничения его только числами:

function numberOnly(id) {
    // Get element by id which passed as parameter within HTML element event
    var element = document.getElementById(id);
    // User numbers only pattern, from 0 to 9
    var regex = /[^0-9]/gi;
    // This removes any other character but numbers as entered by user
    element.value = element.value.replace(regex, "");
}

демо: https://codepen.io/aslami/pen/GdPvRY

вот мое решение с jQuery... Вы должны добавить свойство maxlength, чтобы ваш тип ввода=количество

$('body').on('keypress', 'input[type=number][maxlength]', function(event){
    var key = event.keyCode || event.charCode;
    var charcodestring = String.fromCharCode(event.which);
    var txtVal = $(this).val();
    var maxlength = $(this).attr('maxlength');
    var regex = new RegExp('^[0-9]+$');
    // 8 = backspace 46 = Del 13 = Enter 39 = Left 37 = right Tab = 9
    if( key == 8 || key == 46 || key == 13 || key == 37 || key == 39 || key == 9 ){
        return true;
    }
    // maxlength allready reached
    if(txtVal.length==maxlength){
        event.preventDefault();
        return false;
    }
    // pressed key have to be a number
    if( !regex.test(charcodestring) ){
        event.preventDefault();
        return false;
    }
    return true;
});

и обрабатывать копировать и вставлять:

$('body').on('paste', 'input[type=number][maxlength]', function(event) {
    //catch copy and paste
    var ref = $(this);
    var regex = new RegExp('^[0-9]+$');
    var maxlength = ref.attr('maxlength');
    var clipboardData = event.originalEvent.clipboardData.getData('text');
    var txtVal = ref.val();//current value
    var filteredString = '';
    var combined_input = txtVal + clipboardData;//dont forget old data

    for (var i = 0; i < combined_input.length; i++) {
        if( filteredString.length < maxlength ){
            if( regex.test(combined_input[i]) ){
                filteredString += combined_input[i];
            }
        }
    }
    setTimeout(function(){
        ref.val('').val(filteredString)
    },100);
});

Я надеюсь, что это поможет кому-то.

Я знаю, что уже есть ответ, но если вы хотите, чтобы ваш вход вел себя точно так же, как

по моему опыту большинство проблем, где люди спрашивают, почему maxlength игнорируется, потому что пользователю разрешено вводить больше, чем "разрешенное" количество символов.

как и другие замечания заявили, type="number" входы не имеют maxlength атрибут и, вместо этого, есть min и .

чтобы поле ограничивало количество символов, которые могут быть вставлены, позволяя пользователю знать об этом до отправки формы (браузер следует определить значение > max в противном случае), вам придется (на данный момент, по крайней мере) добавить слушателя в поле.

вот решение, которое я использовал в прошлом:http://codepen.io/wuori/pen/LNyYBM

<input type="number" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '');" onKeyDown="if(this.value.length==10 && event.keyCode!=8) return false;">

DEMO -JSFIDDLE

Chrome (технически, мигает)не будет реализовывать maxlength на <input type="number">.

спецификация HTML5 говорит, что maxlength применим только к типам text, url, e-mail, search, tel и password.

maxlenght-тип ввода текста

<input type="email" name="email" maxlength="50">

С помощью jQuery:

$("input").attr("maxlength", 50)

maxlenght - номер входа типа

JS

function limit(element, max) {    
    var max_chars = max;
    if(element.value.length > max_chars) {
        element.value = element.value.substr(0, max_chars);
    } 
}

HTML

<input type="number" name="telefono" onkeydown="limit(this, 20);" onkeyup="limit(this, 20);">