web-dev-qa-db-fra.com

Limiter la zone de saisie à 0-100

J'ai une zone de saisie qui prend des valeurs de 0 à 100. Je veux empêcher les utilisateurs d'écrire quelque chose de plus gros ou de plus petit.

J'utilise le plug-in jquery keyfilter pour limiter la saisie d'un champ: http://code.google.com/p/jquery-keyfilter/

Ce plugin peut limiter l’entrée aux chiffres, mais pas dans une plage. Comment empêcher les utilisateurs d'entrer des nombres qui dépasseraient la plage? Merci.

javascriptjqueryinputlimitkeyfilter
13
Jourkey

Utilisez du Javascript simple comme ceci:

<script>
  function handleChange(input) {
    if (input.value < 0) input.value = 0;
    if (input.value > 100) input.value = 100;
  }
</script>

Puis déclarez la zone de saisie comme ceci:

<input type="text" onchange="handleChange(this);" />

Comme vous avez lié cette fonction à onchange (), cela fonctionnera même si un utilisateur copie/colle quelque chose dans la zone de saisie.

35
Kshitij Saxena -KJ-

Je suggérerais d'utiliser jQuery Validation plugin. Très flexible et extensible. Pour gérer votre plage, interrogez ce qui suit. Il sera validé que toute entrée de votre formulaire marquée avec la classe "pourcentage" est présente et se situe dans la plage donnée.

$("#myform").validate({
  rules: {
    percentage: {
      required: true,
      range: [0, 100]
    }
  }
});

<input id="percent" name="percent" class="percentage" />

La raison pour laquelle je suggère d'utiliser le plugin est qu'il gère de nombreuses situations de validation prêtes à l'emploi, vous libérant ainsi de la responsabilité d'écrire du code de validation pour de nombreux scénarios - vous pouvez déployer vos efforts créatifs de manière plus efficace. Il est également utilisé par de nombreuses personnes et présente donc l'avantage supplémentaire d'être amélioré par une grande communauté.

Update : vous pouvez également envisager un autre mécanisme de saisie, tel qu'un curseur ( - demo ) qui contraindra les données d'une manière qui ne soit pas soumise à l'utilisateur erreur - ou du moins pas ce type d'erreur particulière.

9
tvanfosson

HTML5 a ajouté plusieurs nouveaux types d’entrée , dont number.

<form>
  Quantity (between 1 and 100):
  <input type="number" name="quantity" min="1" max="100">
</form>

Les nouveaux types d’entrée qui ne sont pas pris en charge par les anciens navigateurs Web se comporteront comme <input type="text">.

Exemple exécutable de W3Schools. 

7
Mahdi Bashirpour

vous pouvez utiliser Math.max et Math.min

val = Math.min(100,Math.max(0,val));
4
jilykate
<input type="text" id="test_id" />
<script>
document.getElementById("test_id").onkeyup=function(){
    var input=parseInt(this.value);
    if(input<0 || input>100)
    alert("Value should be between 0 - 100");
    return;
}    
</script>
2
Xinus

Il vous suffit de tester la valeur du champ après chaque frappe et avant de l'envoyer au champ (par exemple avec un gestionnaire d'événement de frappe) - si la nouvelle frappe crée une valeur trop élevée, refusez la saisie.

Par exemple, si la valeur actuelle est 20 et que l'utilisateur essaie de saisir un troisième nombre, vous devez rejeter l'appui sur la touche en renvoyant la valeur false à partir du gestionnaire d'événements. Fondamentalement, le seul troisième caractère que vous devez autoriser est "0" et uniquement si la valeur du champ actuel est "10".

1
Guss

par jQuery pour ce faire 

<input type="number" name="quantity">

si le nombre n'est pas compris entre 0 et 100, le champ de saisie est vide

<script>
    $("input[name='quantity']").change(function() {
      number = $("input[name='quantity']").val()
       if( number <= 0 || number >= 100 ) {
           $("input[name='quantity']").val("");
           alert("0 - 100");
         }
       });
</script>
0
Alfred.P