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

на

100
google-chrome html5

14 ответов

С документация MDN для <input>

, если значение тип и text, email, search, password, tel или url, этот атрибут задает максимальное количество символов (в кодовых точках Юникода), которое пользователь может ввести; для других типов элементов управления он игнорируется.

так maxlength игнорируется на <input type="number"> дизайн.

в зависимости от ваших потребностей, вы можете использовать the min и max атрибуты Инон предложено в его / ее ответе (NB: это будет определять только ограниченный диапазон, а не фактическую длину символа значения, хотя -9999 до 9999 будет охватывать все 0-4-значные числа), или вы можете использовать обычный ввод текста и обеспечить проверку на поле с новым pattern:

<input type="text" pattern="\d*" maxlength="4">
132

максимальная длина не будет работать с <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"
 />
106

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

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

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

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

Во-Первых: Используйте 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;" />
14

многие ребята выложили 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;" />
4

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

<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;"
/>

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

3

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

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

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

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

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

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

2

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

$('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);
});

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

2

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

1

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

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

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

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

1
<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;">

демо - JSFIDDLE

1

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

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

0

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);">
-2