La valeur maximale du champ d'entrée Html est

Question

La propriété max ne fonctionne pas si je mets un nombre sur le terrain. Pourquoi? cela fonctionne seulement quand je change la valeur avec les flèches.

JS Fiddle

HTML

<input id= "0" class='labelmax form-control' 
type='number' name='max_label' min='0' max='99' value='1'> 

Answer 1

Avec HTML5 max et min, vous ne pouvez limiter les valeurs à entrer dans les chiffres. Mais vous devez utiliser JavaScript ou jQuery pour faire ce genre de changement. Une idée que j'ai est en utilisant des attributs de données et enregistrer l'ancienne valeur:

$(function() { 
    $("input").keydown(function() { 
    // Save old value. 
    $(this).data("old", $(this).val()); 
    }); 
    $("input").keyup(function() { 
    // Check correct, else revert back to old value. 
    if (parseInt($(this).val()) <= 99 && parseInt($(this).val()) >= 0) 
     ; 
    else 
     $(this).val($(this).data("old")); 
    }); 
}); 

Answer 2

Pour ce travail que vous avez automatiquement pour envelopper votre entrée dans un formulaire et ajouter un bouton soumettre à cette forme

Si vous ne ne voulez pas l'emballer dans un formulaire et que vous souhaitiez une personnalisation maximale, vous devrez utiliser Javascript et configurer un gestionnaire d'événements qui écoutera l'entrée de l'utilisateur et agira en conséquence

Answer 3

Vous pouvez utiliser quelque chose comme ci-dessous en utilisant JavaScript simple . Dans votre code, je ne vois pas de JS.

document.getElementsByClassName('labelmax form-control')[0].oninput = function() { 
 
     var max = parseInt(this.max); 
 

 
     if (parseInt(this.value) > max) { 
 
      this.value = max; 
 
     } 
 
    }

<input id= "0" class='labelmax form-control' type='number' name='max_label' max='99' value='1'/>