maxlength ignoré pour type d'entrée = "nombre" dans Chrome

L' maxlengthattribut ne fonctionne pas avec <input type="number">. Cela se produit uniquement dans Chrome.

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

D'après la documentation de MDN pour<input>

Si la valeur du genre attribut est text, email, search, password, telou url, cet attribut spécifie le nombre maximal de caractères (en points de code Unicode) que l'utilisateur peut entrer; pour les autres types de contrôle, il est ignoré.

maxlengthEst donc ignoré <input type="number">par la conception.

En fonction de vos besoins, vous pouvez utiliser les minet maxattributs Inon suggéré dans son / sa réponse (NB: cela ne définir une plage contrainte, pas la longueur de caractère réel de la valeur, mais -9999 à 9999 couvrira tous les 0-4 chiffres), ou vous pouvez utiliser une saisie de texte standard et appliquer la validation sur le champ avec le nouvel patternattribut:

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

La longueur maximale ne fonctionnera pas avec <input type="number"la meilleure façon que je sache est d'utiliser l' oninputévénement pour limiter la longueur maximale. Veuillez voir le code ci-dessous.

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

Beaucoup de gars ont posté un onKeyDown()événement qui ne fonctionne pas du tout, c'est-à-dire que vous ne pouvez pas supprimer une fois que vous avez atteint la limite. Donc, au lieu d' onKeyDown()utiliser onKeyPress()et cela fonctionne parfaitement bien.

Ci-dessous est le code de travail:

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

J'ai deux façons de le faire

Premièrement: utilisez type="tel", cela fonctionnera comme type="number"dans un mobile et acceptez maxlength:

<input type="tel" />

Deuxièmement: utilisez un peu de JavaScript:

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

Vous pouvez utiliser les attributs min et max .

Le code suivant fait de même:

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

Changez votre type d'entrée en texte et utilisez l'événement "oninput" pour appeler la fonction:

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

Utilisez maintenant Javascript Regex pour filtrer les entrées utilisateur et les limiter aux nombres uniquement:

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

Démo: https://codepen.io/aslami/pen/GdPvRY

Une fois, je suis entré dans le même problème et j'ai trouvé cette solution en fonction de mes besoins. Cela peut aider quelqu'un.

<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 :)

Vous pouvez également essayer ceci pour la saisie numérique avec restriction de longueur

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

DÉMO - JSFIDDLE

Voici ma solution avec jQuery ... Vous devez ajouter maxlength à votre type d'entrée = nombre

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

Et gérer le copier-coller:

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

J'espère que ça aide quelqu'un.

D'après mon expérience, la plupart des problèmes où les gens demandent pourquoi maxlengthest ignoré, c'est parce que l'utilisateur est autorisé à entrer plus que le nombre de caractères "autorisé".

Comme d'autres commentaires l'ont indiqué, les type="number"entrées n'ont pas d' maxlengthattribut et ont plutôt un attribut minand max.

Pour que le champ limite le nombre de caractères pouvant être insérés tout en permettant à l'utilisateur d'en être conscient avant l'envoi du formulaire (le navigateur doit identifier la valeur> max sinon), vous devrez (pour l'instant, au moins) ajouter un auditeur sur le terrain.

Voici une solution que j'ai utilisée dans le passé: http://codepen.io/wuori/pen/LNyYBM

Je sais qu'il y a déjà une réponse, mais si vous voulez que votre entrée se comporte exactement comme l' maxlengthattribut ou aussi près que possible, utilisez le code suivant:

(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 (techniquement, Blink) n'implémentera pas maxlength pour <input type="number">.

La spécification HTML5 indique que maxlength n'est applicable qu'aux types texte, URL, e-mail, recherche, tél et mot de passe.

La solution absolue que je viens d'essayer est:

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

Je vais le faire rapidement et facilement à comprendre!

Au lieu de maxlength pour type='number'(maxlength est destiné à définir la quantité maximale de lettres pour une chaîne dans un texttype), utilisez min=''et max=''.

À votre santé

<input type="number"> est juste que ... une entrée numérique (quoique non convertie d'une chaîne pour flotter via Javascript).

Je suppose que cela ne restreint pas les caractères sur la saisie de clé par maxLengthou sinon votre utilisateur pourrait être coincé dans un "piège à clé" s'il a oublié une décimale au début (essayez de mettre un .index at 1quand une <input type"text">attr "maxLength" a déjà été atteinte ). Il sera cependant validé sur le formulaire soumis si vous définissez un maxattribut.

Si vous essayez de restreindre / valider un numéro de téléphone, utilisez la type="tel"valeur attr /. Il obéit à l' maxLengthattr et fait apparaître le clavier numérique mobile uniquement (dans les navigateurs modernes) et vous pouvez restreindre la saisie à un modèle (par exemple pattern="[0-9]{10}").

Pour les utilisateurs de React,

Remplacez simplement 10 par votre longueur maximale requise

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

maxlenght - texte du type d'entrée

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

en utilisant jQuery:

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

maxlenght - numéro de type d'entrée

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