longitud máxima ignorada para el tipo de entrada = "número" en Chrome

El maxlengthatributo no funciona con <input type="number">. Esto sucede solo en Chrome.

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

De la documentación de MDN para<input>

Si el valor de la Tipo de atributo es text, email, search, password, tel, o url, este atributo especifica el número máximo de caracteres (en puntos de código Unicode) que el usuario puede introducir; para otros tipos de control, se ignora.

Entonces maxlengthes ignorado <input type="number">por el diseño.

Dependiendo de sus necesidades, puede utilizar el miny maxatributos como Inon sugerido en su / su respuesta (Nota: esto sólo definir un rango restringido, no la longitud de caracteres real del valor, aunque -9999 a 9.999 cubrir toda 0-4 números de dígitos), o puede usar una entrada de texto regular y aplicar la validación en el campo con el nuevo patternatributo:

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

La longitud máxima no funcionará de <input type="number"la mejor manera que sé, es usar el oninputevento para limitar la longitud máxima. Por favor vea el siguiente código.

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

Muchos chicos publicaron un onKeyDown()evento que no funciona en absoluto, es decir, no puedes eliminarlo una vez que alcanzas el límite. Entonces, en lugar de onKeyDown()usarlo onKeyPress(), funciona perfectamente bien.

A continuación se muestra el código de trabajo:

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

Tengo dos maneras para que hagas eso

Primero: use type="tel", funcionará como type="number"en un dispositivo móvil y acepte maxlength:

<input type="tel" />

Segundo: use un poco de JavaScript:

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

Puede usar los atributos min y max .

El siguiente código hace lo mismo:

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

Cambie su tipo de entrada a texto y use el evento "oninput" para llamar a la función:

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

Ahora use Javascript Regex para filtrar la entrada del usuario y limitarla solo a números:

function numberOnly(id) {
    // Get element by id which passed as parameter within HTML element event
    var element = document.getElementById(id);
    // Use 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, "");
}

Demostración: https://codepen.io/aslami/pen/GdPvRY

Una vez tuve el mismo problema y encontré esta solución con respecto a mis necesidades. Puede ayudar a alguien.

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

Happy Coding :)

También puede probar esto para la entrada numérica con restricción de longitud

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

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

DEMO - JSFIDDLE

Aquí está mi solución con jQuery ... Debe agregar maxlength a su tipo de entrada = número

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

Y maneje copiar y pegar:

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

Espero que ayude a alguien.

En mi experiencia, la mayoría de los problemas en los que la gente pregunta por qué maxlengthse ignora es porque el usuario puede ingresar más que el número "permitido" de caracteres.

Como han dicho otros comentarios, las type="number"entradas no tienen un maxlengthatributo y, en cambio, tienen un atributo miny max.

Para que el campo limite el número de caracteres que se pueden insertar y, al mismo tiempo, permita que el usuario se dé cuenta de esto antes de enviar el formulario (de lo contrario, el navegador debe identificar el valor> max), deberá (por ahora, al menos) agregar un Oyente al campo.

Aquí hay una solución que he usado en el pasado: http://codepen.io/wuori/pen/LNyYBM

Sé que ya hay una respuesta, pero si desea que su entrada se comporte exactamente como el maxlengthatributo o lo más cerca posible, use el siguiente código:

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

Chrome (técnicamente, Blink) no implementará la longitud máxima para <input type="number">.

La especificación HTML5 dice que maxlength solo es aplicable a los tipos texto, url, correo electrónico, búsqueda, teléfono y contraseña.

La solución absoluta que acabo de probar recientemente es:

<input class="class-name" placeholder="1234567" name="elementname"  type="text" maxlength="4" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" />

¡Haré esto rápido y fácil de entender!

En lugar de maxlength for type='number'(maxlength está destinado a definir la cantidad máxima de letras para una cadena en un texttipo), use min=''y max=''.

Salud

<input type="number"> es solo eso ... una entrada numérica (aunque no convertida desde una cadena para flotar a través de Javascript).

Supongo que no restringe los caracteres en la entrada de teclas maxLengtho, de lo contrario, su usuario podría quedar atrapado en una "trampa de teclas" si olvidaron un decimal al principio (Intente poner un .índice en 1cuando <input type"text">ya se haya alcanzado un atributo "maxLength" ) Sin embargo, se validará en el envío del formulario si establece un maxatributo.

Si está tratando de restringir / validar un número de teléfono, use el type="tel"atributo / valor. Obedece el maxLengthatributo y solo muestra el teclado del número móvil (en los navegadores modernos) y puede restringir la entrada a un patrón (es decir pattern="[0-9]{10}").

Para usuarios de React,

Simplemente reemplace 10 con su requisito de longitud máxima

 <input type="number" onInput={(e) => e.target.value = e.target.value.slice(0, 10)}/>

maxlenght - texto de tipo de entrada

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

usando jQuery:

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

maxlenght - número de tipo de entrada

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