maxlength ignoré pour le type d’entrée = «number» dans Chrome

L’atsortingbut maxlength ne fonctionne pas avec . Cela se produit uniquement dans Chrome.

  

De la documentation de MDN pour

Si la valeur de l’atsortingbut type est text , email , search , password , tel ou url , cet atsortingbut spécifie le nombre maximal de caractères (en points de code Unicode) que l’utilisateur peut saisir; pour les autres types de contrôle, il est ignoré.

Ainsi, maxlength est ignoré sur par conception.

Selon vos besoins, vous pouvez utiliser les atsortingbuts min et max comme suggéré dans sa réponse (NB: cela ne définira qu’une plage limitée, pas la longueur de caractères réelle de la valeur, bien que -9999 à 9999 couvrent tous les 0). -4 numéros de chiffres), ou vous pouvez utiliser une entrée de texte standard et appliquer la validation sur le champ avec le nouvel atsortingbut de pattern :

  

La longueur maximum ne fonctionnera pas avec La meilleure façon de le savoir est d'utiliser oninput événement oninput pour limiter la longueur maximale. S'il vous plaît voir le code ci-dessous.

  

Vous pouvez utiliser les atsortingbuts min et max .

Le code suivant fait la même chose:

  

J’ai deux façons de faire ça

Premièrement: utilisez type="tel" , ça va marcher comme type="number" dans le mobile, et accepter maxlength:

  

Deuxièmement: Utilisez un peu de JavaScript:

   

Une fois, j’ai eu le même problème et j’ai trouvé cette solution en fonction de mes besoins. Cela peut aider quelqu’un.

  

Bonne codage 🙂

Vous pouvez aussi essayer ceci pour une saisie numérique avec ressortingction de longueur

  

Beaucoup de gars ont posté l’ onKeyDown() qui ne fonctionne pas du tout, c’est-à-dire que vous ne pouvez pas supprimer une fois que vous avez atteint la limite. Donc, à la place de onKeyDown() utilisez onKeyPress() et cela fonctionne parfaitement bien. Ci-dessous le code de travail:

 User will not be allowed to enter more than 4 digits 

Voici ma solution avec jQuery … Vous devez append maxlength à votre type d’entrée = nombre

 $('body').on('keypress', 'input[type=number][maxlength]', function(event){ var key = event.keyCode || event.charCode; var charcodessortingng = Ssortingng.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(charcodessortingng) ){ event.preventDefault(); return false; } return true; }); 

Et gérer copier et 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 filteredSsortingng = ''; 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.

Je sais qu’il y a déjà une réponse, mais si vous voulez que votre entrée se comporte exactement comme l’atsortingbut maxlength ou aussi proche 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) { // ressortingct 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().toSsortingng(); } 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(); 

Dans mon expérience, la plupart des problèmes où les gens demandent pourquoi maxlength est ignoré, c’est parce que l’utilisateur est autorisé à entrer plus que le nombre de caractères “autorisés”.

Comme d’autres commentaires l’ont déclaré, les entrées type="number" n’ont pas d’atsortingbut maxlength et ont plutôt un atsortingbut min et max .

Pour que le champ limite le nombre de caractères pouvant être insérés tout en permettant à l’utilisateur d’en avoir connaissance avant que le formulaire ne soit soumis (le navigateur devrait identifier la valeur> max sinon), vous devrez (pour le moment au moins) append un auditeur sur le terrain.

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

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

  

Maintenant, utilisez Javascript Regex pour filtrer les entrées des utilisateurs et les limiter uniquement aux nombres:

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

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

Chrome (techniquement, Blink) n’implémentera pas maxlength pour .

La spécification HTML5 indique que maxlength ne s’applique qu’aux types text, url, e-mail, recherche, tel et mot de passe.

  

DEMO – JSFIDDLE

maxlenght – type de texte d’entrée

  

en utilisant jQuery:

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

maxlenght – numéro du 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