Limiter les entrées d’un input type number

Lorsque l’on propose un formulaire à l’utilisateur pour entrée des données numériques, on dispose d’une zone de saisie de type number. L’utilisateur ne peut entrer alors que des données de type numérique. Sur les mobiles, selon les systèmes, on peut avoir un clavier ou une roue pour sélectionner la valeur à inscrire.

Input type number sur un mobile Android sur fond d'île sous le vent Bora Bora en Polynésie Française

Balise HTML

La zone de saisie s’écrit :

On peut spécifier une valeur maximale, une valeur minimale, un pas d’incrémentation, lorsque l’on clique sur les flèches sur un système Windows.

input type number sur Chrome et Windows

Minimun, maximum, pas

On définit cela dans les attributs de la balise input. Si les attributs min, max sont définis, les valeurs ne pourront sortir de cet intervalle en cliquant sur les flèches d’incrémentation. L’incrémentation peut aussi être fixée avec l’attribut step.

Dans cet exemple, la zone de saisie est limitée entre 0 et 5, l’incrément se fait au dixième. Mais l’utilisateur peut entrer des nombres au clavier, et ces contrôles n’opèrent pas. L’utilisateur peut alors très bien taper une valeur supérieure à 5, ou entrer un nombre négatif en appuyant au préalable sur la touche -.

Événements javascript

Pour effectivement limiter les entrées possible dans le champ, il faut contrôler les entrées clavier en javascript avec les événements keydown et keyup. keydown intervient lorsque l’utilisateur appuie sur une touche du clavier, la valeur du code de la touche n’est encore pas contenue dans la valeur de l’élément, n’est disponible que la valeur issue des touches précédemment utilisées. keyup intervient lorsque l’utilisateur relâche la touche, l’élément contient alors la valeur entrée par l’utilisateur dans la combinaison de toutes les touches, la dernière comprise.

keypress et keyup

Par défaut, les touches acceptées par un input de type number sont les chiffres, les touches + et - pour les nombres positives et négatifs, et la touche . pour les décimaux. L’appui sur la touche Entrée, Enter, Return permet la validation du formulaire en entier et lance le traitement. On peut interdire l’appui sur certaines de ces touches. Par exemple pour n’avoir que des nombres positifs, l’appui sur la touche - sera ineffective. Cela se fait avec l’événement keypress. Ensuite, on peut tester la valeur contenue dans la zone de saisie avec l’événement keyup et tester si cette valeur est comprise entre les limites que l’on a définies. Si cette valeur est en dehors de ces limites, on remplit la zone en javascript par la valeur maximale ou minimale.

Code

Si l’on ne veut que des entiers, on peut écrire dans la fonction onkeyup :

See the Pen js input type number, value control by xavier bs (@xavier_bs) on CodePen.

Et hop, un moyen pour obtenir des valeurs numériques qui obéissent à certaines contraintes. Evidemment, le javascript ne doit pas être désactivé dans le navigateur.

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables.