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

Атрибут maxlength не работает с <input type="number">. Это происходит только в Chrome.

<input type="number" class="test_css"  maxlength="4"  id="flight_number" name="number"/>

Ответ 1

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

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

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

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

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

Ответ 2

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

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

Ответ 3

Вы можете использовать атрибуты min и max.

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

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

Ответ 4

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

Сначала: используйте 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;" />

Ответ 5

Вот мое решение с 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){
        return false;
    }
    // pressed key have to be a number
    if( !regex.test(charcodestring) ){
        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);
});

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

Ответ 6

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

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

Ответ 7

Я уже знаю ответ, но если вы хотите, чтобы ваш ввод вел себя точно так же, как и атрибут maxlength или как можно ближе, используйте следующий код:

(function($) {
 methods = {
    /*
     * addMax will take the applied element and add a javascript behavior
     * that will set the max length
     */
    addMax: function() {
        // set variables
        var
            maxlAttr = $(this).attr("maxlength"),
            maxAttR = $(this).attr("max"),
            x = 0,
            max = "";

        // If the element has maxlength apply the code.
        if (typeof maxlAttr !== typeof undefined && maxlAttr !== false) {

            // create a max equivelant
            if (typeof maxlAttr !== typeof undefined && maxlAttr !== false){
                while (x < maxlAttr) {
                    max += "9";
                    x++;
                }
              maxAttR = max;
            }

            // Permissible Keys that can be used while the input has reached maxlength
            var keys = [
                8, // backspace
                9, // tab
                13, // enter
                46, // delete
                37, 39, 38, 40 // arrow keys<^>v
            ]

            // Apply changes to element
            $(this)
                .attr("max", maxAttR) //add existing max or new max
                .keydown(function(event) {
                    // restrict key press on length reached unless key being used is in keys array or there is highlighted text
                    if ($(this).val().length == maxlAttr && $.inArray(event.which, keys) == -1 && methods.isTextSelected() == false) return false;
                });;
        }
    },
    /*
     * isTextSelected returns true if there is a selection on the page. 
     * This is so that if the user selects text and then presses a number
     * it will behave as normal by replacing the selection with the value
     * of the key pressed.
     */
    isTextSelected: function() {
       // set text variable
        text = "";
        if (window.getSelection) {
            text = window.getSelection().toString();
        } else if (document.selection && document.selection.type != "Control") {
            text = document.selection.createRange().text;
        }
        return (text.length > 0);
    }
};

$.maxlengthNumber = function(){
     // Get all number inputs that have maxlength
     methods.addMax.call($("input[type=number]"));
 }

})($)

// Apply it:
$.maxlengthNumber();

Ответ 8

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

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

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

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

Ответ 9

Это позволит любое число от 0 до 9999, не более, а не буквы не специальные символы.

Ответ 10

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

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

Счастливое кодирование:)

Ответ 11

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

В спецификации HTML5 указано, что maxlength применим только к типам текста, url, e-mail, search, tel и password.

Ответ 12

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

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

с помощью jQuery:

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

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

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