Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

GESTION DES EVENEMENTS LIES AU CLAVIER EN JQUERY

Les méthodes jQuery keydown(), keyup() et keypress()

Les méthodes keydown(), keyup() et keypress() vont nous permettre de répondre à des évènements relatifs au clavier de l’utilisateur.

Plus précisément, keydown() va gérer l’évènement « on presse une touche du clavier » tandis que keyup() va gérer l’évènement contraire, à savoir de relâchement d’une touche du clavier (qui était enfoncée).

La méthode keypress() va elle nous permettre de gérer l’évènement « maintien d’une touche du clavier pressée ».

Ces trois méthodes vont être très utilisées dans le cadre de la création de jeux par exemple ou avec les formulaires HTML, afin d’aider l’utilisateur.

Exemple d’utilisation de keydown() et keyup()

On va par exemple pouvoir changer la couleur de fond d’un champ de formulaire selon que l’utilisateur soit en train d’écrire ou pas.

Pour modifier la couleur de fond d’un élément en jQuery, nous allons utiliser la méthode css() dont nous reparlerons plus tard. Nous allons passer une propriété CSS et une valeur pour cette propriété en arguments de cette méthode.

Utilisation des méthodes jQuery keydown() et keyup()

Essayer ce code

Utilisation de la méthode keypress()

L’évènement keypress est plus ou moins similaire à keydown. Les différences se trouvent dans l’ordre de déclenchement des évènements (l’évènement keydown se déclenchera toujours avant keypress) et dans les touches qui vont pouvoir déclencher ces évènements.

En effet, l’évènement keypress ne va pas pouvoir être déclenché par toutes les touches du clavier (alt, ctrl, shift, etc.) car c’est un évènement créé à la base pour capturer la saisie de caractères.

La méthode keypress() est donc toute indiquée pour récupérer précisément les caractères tapés par les utilisateurs.

Pour faire cela, nous allons devoir utiliser la propriété which de l’objet JavaScript Event. Nous allons donc devoir passer une référence à notre fonction gestionnaire d’évènement pour utiliser which (nous utiliserons e pour « evenement »).

La propriété which de l'objet Event va renvoyer le code ASCII correspondant au caractère tapé par l’utilisateur. La norme ASCII attribue un chiffre à chaque touche du clavier.

Pour ensuite récupérer le caractère effectivement tapé à partir du code ASCII, nous allons utiliser la méthode fromCharCode() qui est une méthode de l’objet String et qui va transformer un code ASCII en caractère.

Finalement, pour afficher le résultat dans notre page, nous allons utiliser la méthode text() que nous étudierons plus en détail dans une prochaine partie.

Voilà comment nous allons faire tout cela en pratique :

Utilisation des méthodes jQuery keypress () et text()

Essayer ce code

Dans l’exemple ci-dessus, on récupère le code ASCII correspondant au caractère tapé avec e.which, qu’on retransforme immédiatement avec string.fromCharCode().

On place le résultat dans une variable touche et on affiche ce que contient notre variable dans un élément span grâce à la méthode text().

Ici, nous utilisons du JavaScript pur avec du jQuery. Cela est tout à fait possible puisque le jQuery, rappelons le, n'est que du JavaScript à la base.

Chapitre précédent

Chapitre suivant