Comment puis-je limiter les entrées possibles dans un élément HTML5 «nombre»?

Pour l’élément , maxlength ne fonctionne pas. Comment puis-je restreindre la maxlength de cet élément numérique?

Et vous pouvez append un atsortingbut max qui spécifie le nombre le plus élevé possible que vous pouvez insérer

  

Si vous ajoutez à la fois une valeur max et une valeur min , vous pouvez spécifier la plage de valeurs autorisées:

  

Ce qui précède n’empêchera toujours pas un utilisateur d’entrer manuellement une valeur en dehors de la plage spécifiée. Au lieu de cela, il affichera une fenêtre lui indiquant d’entrer une valeur dans cette plage lors de la soumission du formulaire, comme indiqué dans cette capture d’écran:

entrer la description de l'image ici

Vous pouvez spécifier les atsortingbuts min et max , ce qui permettra l’entrée uniquement dans une plage spécifique.

   

Cela ne fonctionne que pour les boutons de commande du disque, cependant. Bien que l’utilisateur puisse taper un nombre supérieur au nombre max autorisé, le formulaire ne sera pas soumis.

Message de validation de Chrome pour les nombres supérieurs au maximum
Capture d’écran tirée de Chrome 15

Vous pouvez utiliser l’événement HTML5 oninput en JavaScript pour limiter le nombre de caractères:

 myInput.oninput = function () { if (this.value.length > 4) { this.value = this.value.slice(0,4); } } 

Si vous recherchez une solution Web mobile dans laquelle vous souhaitez que votre utilisateur affiche un pavé numérique plutôt qu’un clavier en texte intégral. Utilisez type = “tel”. Cela fonctionnera avec maxlength qui vous évite de créer du javascript supplémentaire.

Max et Min permettront toujours à l’utilisateur de taper des nombres supérieurs à max et min, ce qui n’est pas optimal.

Vous pouvez combiner tout cela comme ceci:

   

Mettre à jour:
Vous voudrez peut-être également empêcher la saisie de caractères non numériques, car object.length serait une chaîne vide pour les entrées numériques et sa longueur serait donc 0 . Ainsi, la fonction maxLengthCheck fonctionnera pas.

Solution:
Voir ceci ou cela pour des exemples.

Démo – Voir la version complète du code ici:
http://jsfiddle.net/DRSDavidSoft/zb4ft1qq/1/

Mise à jour 2: Voici le code de mise à jour: https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/

Mise à jour 3: Veuillez noter que le fait d’autoriser la saisie de plus d’un point décimal peut perturber la valeur numérique.

c’est très simple, avec du javascript, vous pouvez simuler une maxlength , maxlength -le:

 //maxlength="2"  

Ou si votre valeur maximale est par exemple 99 et minimum 0, vous pouvez append ceci à l’élément d’entrée (votre valeur sera réécrite par votre valeur maximale, etc.)

  

Ensuite (si vous voulez), vous pouvez vérifier si le nombre d’entrée est vraiment

Vous pouvez le spécifier en tant que texte, mais append Pettern, qui correspond uniquement aux numéros:

  

Il fonctionne parfaitement et aussi sur mobile (testé sur iOS 8 et Android) fait apparaître le clavier numérique.

 //For Angular I have attached following snippet. 
 
Enter number:

You entered: {{number}}

La réponse de Maycow Moura était un bon début. Cependant, sa solution signifie que lorsque vous entrez le deuxième chiffre, toutes les modifications du champ s’arrêtent. Vous ne pouvez donc pas modifier les valeurs ou supprimer des caractères.

Le code suivant s’arrête à 2, mais permet de continuer à éditer;

 //MaxLength 2 onKeyDown="if(this.value.length==2) this.value = this.value.slice(0, - 1);" 

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. Veuillez consulter le code ci-dessous pour une implémentation simple.

  

J’ai eu ce problème avant et je l’ai résolu en utilisant une combinaison de type de numéro html5 et jQuery.

  

scénario:

 $("input[name='minutes']").on('keyup keypress blur change', function(e) { //return false if not 0-9 if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) { return false; }else{ //limit length but allow backspace so that you can still delete the numbers. if( $(this).val().length >= parseInt($(this).attr('maxlength')) && (e.which != 8 && e.which != 0)){ return false; } } }); 

Je ne sais pas si les événements sont un peu exagérés mais cela a résolu mon problème. JSfiddle

Comme d’autres l’ont indiqué, min / max n’est pas la même chose que maxlength, car les utilisateurs peuvent toujours entrer un nombre supérieur à la longueur de chaîne maximale souhaitée. Pour émuler vraiment l’atsortingbut maxlength, vous pouvez faire quelque chose comme ça dans un pincement (cela équivaut à maxlength = “16”):

  

Une autre option consiste à append un écouteur pour tout ce qui a un atsortingbut maxlength et à append la valeur de la tranche à celle-ci. En supposant que l’utilisateur ne souhaite pas utiliser une fonction dans chaque événement lié à l’entrée. Voici un extrait de code. Ignorer le code CSS et HTML, le JavaScript est ce qui compte.

 // Reusable Function to Enforce MaxLength function enforce_maxlength(event) { var t = event.target; if (t.hasAtsortingbute('maxlength')) { t.value = t.value.slice(0, t.getAtsortingbute('maxlength')); } } // Global Listener for anything with an maxlength atsortingbute. // I put the listener on the body, put it on whatever. document.body.addEventListener('input', enforce_maxlength); 
 label { margin: 10px; font-size: 16px; display: block } input { margin: 0 10px 10px; padding: 5px; font-size: 24px; width: 100px } span { margin: 0 10px 10px; display: block; font-size: 12px; color: #666 } 
   set to 5 maxlength 
set to 2 maxlength, min 0 and max 99

Comme avec type="number" , vous spécifiez une propriété max au lieu de maxlength , qui est le nombre maximum possible possible. Donc, avec 4 chiffres, max devrait être 9999 , 5 chiffres 99999 et ainsi de suite.

Aussi, si vous voulez vous assurer qu’il s’agit d’un nombre positif, vous pouvez définir min="0" , en veillant à des nombres positifs.

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

  

Entrée HTML

   

jQuery

  $(".minutesInput").on('keyup keypress blur change', function(e) { if($(this).val() > 120){ $(this).val('120'); return false; } }); 

Un moyen simple de définir maxlength pour les entrées numériques est:

  

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

Comme je l’ai découvert, vous ne pouvez pas utiliser les onkeydown , onkeypress ou onkeyup pour une solution complète, y compris les navigateurs mobiles. Au fait, onkeypress est déconseillé et n’est plus présent dans chrome / opera pour Android (voir: UI Events W3C Working Draft du 4 août 2016 ).

J’ai trouvé une solution utilisant oninput événement oninput . Vous devrez peut-être effectuer des vérifications de nombre supplémentaires, telles que des signes négatifs / positifs ou des séparateurs décimaux et des milliers, etc.

 function checkMaxLength(event) { // Prepare to restore the previous value. if (this.oldValue === undefined) { this.oldValue = this.defaultValue; } if (this.value.length > this.maxLength) { // Set back to the previous value. this.value = oldVal; } else { // Store the previous value. this.oldValue = this.value; // Make additional checks for +/- or ./, etc. // Also consider to combine 'maxlength' // with 'min' and 'max' to prevent wrong submits. } } 

Des atsortingbuts plus pertinents à utiliser seraient min et max .

Pouah. C’est comme si quelqu’un avait abandonné la moitié de sa mise en œuvre et pensait que personne ne le remarquerait.

Pour une raison quelconque, les réponses ci-dessus n’utilisent pas les atsortingbuts min et max . Ce jQuery le termine:

  $('input[type="number"]').on('input change keyup paste', function () { if (this.min) this.value = Math.max(parseInt(this.min), parseInt(this.value)); if (this.max) this.value = Math.min(parseInt(this.max), parseInt(this.value)); }); 

Cela fonctionnerait probablement aussi comme une fonction nommée “oninput” sans jQuery si l’un de ces types “jQuery-is-the-devil”.

Pour qui cherche une limitation globale comme moi:

 $(document).on('keypress','input[type="number"][maxlength]', function(){ return this.value.length < +this.attributes.maxlength.value; }); 

Cela attrape chaque pression de touche sur le document et le filtre si l'entrée est une entrée "number" et a un atsortingbut maxlength . Ensuite, permet à la touche enfoncée lorsque la longueur n'a pas atteint la longueur maximale. Il fonctionne également avec des entrées et des modaux ajoutés dynamicment, etc.