Plugin jQuery: Que des nombres dans un champ Input, validation avec entrée

Notez que cet article a été écrit pour la première fois il y a plus de 3 ans, mais n'est pas nécessairement obsolète.

Que des nombres dans un input type text
HTML5 possède à présent l’input de type number

Pour faciliter l’entrée de valeurs uniquement numériques dans un champ input number et permettre la validation avec la touche entrée, voici un petit plugin jQuery à appliquer sur le champ input, ou sur toute div contenant cet input. Attention tous les inputs à l’intérieur de cette div seront concernés. C’est particulièrement pratique lorsque l’on crée de nouveaux champs avec jQuery ou en ajax (formulaires ajax).

Le code de mon input:

Le plugin:

Quelques petites explications:

on met entre parenthèses la fonction anonyme $ et on l’appelle aussitôt avec l’argument jQuery. Ainsi, dans la fonction, $ signifiera jQuery, et l’on peut utiliser le $ comme d’habitude .

On déclare notre plugin avec $.fn. xbsOnr:  xbs pour mon nom, Onr pour Only Numbers & Return.

On retourne this (js) pour permettre à notre plugin de chainer (principe de jQuery) et on ouvre un each pour que notre plugin s’applique à un sélecteur multiple. On commence ensuite véritablement le code.

On écoute l’événement keypress (appui sur une touche) sur le selecteur. Ici, on utilise $(this) car on est dans each() de jQuery, qui utilise cette syntaxe, contrairement au this précédent du js. $(this) retourne un tableau d’objet(s), ainsi $(this)[0] = this.

code contient le nombre Unicode associé à la touche pressée.

fromCharcode() de l’objet String est une fonction js qui convertit un nombre Unicode en caractère. test() teste selon l’expression régulière qui précède le •. Cette expression est \d qui représente un nombre, encadrée par le délimiteur /. Si le test est juste, le caractère est retourné, si il est faux, l’événement n’est pas transmis (return false).

Si l’on veut aussi pouvoir entrer des nombres négatifs, il faut aussi autoriser le signe »– », on peut écrire la regex: /[0-9\-]/.

Certains navigateurs reconnaissent l’événement keyCode, d’autres le which. Pour se préserver de cela, on teste si le keyCode est reconnu, sinon on prend le which. En principe, jQuery assure la compatibilité, mais on est jamais trop prudent.

On teste si le code de la touche pressée correspond à celui de Entrée.

Si c’est le cas, on cherche les input type:number et on leur simule un événement de sortie. Cela revient à cliquer à l’extérieur du champ input.

Pour éviter la propagation de l’événement keypress aux ancètres de input, on lui applique un return false.

1 commentaire

Trackbacks/Pingbacks

  1. Plugin jQuery: utilisation de tab dans un <textarea> | Murviel Info - […] Structure classique d’un plugin jQuery (explications sur un exemple), […]
  2. Plugin jQuery: utilisation de tab dans un <textarea> - Murviel Info - […] Structure classique d’un plugin jQuery (explications sur un exemple), […]

Soumettre un commentaire

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