Gestion des événements déclenchés par le clavier avec jQuery

Dans cette leçon, nous allons découvrir les méthodes jQuery nous permettant de gérer les événements liés au clavier : pressage d’une touche, touche enfoncée, relâchement d’une touche, etc.

 

Les méthodes keydown() et keyup()

La méthode keydown() nous permet d’enregistrer un gestionnaire d’événements pour l’événement keydown. L’événement keydown se déclenche dès qu’un utilisateur appuie sur une touche de son clavier et, si la touche reste pressée, est renvoyé à chaque fois que le système d’opération répète la touche.

Au contraire, la méthode keyup() va nous permettre d’enregistrer un gestionnaire d’événements pour l’événement keyup qui se déclenche dès qu’une touche est relâchée.

Notez que ces deux événements ne vont pouvoir être envoyés qu’à un élément qui possède le focus. En conséquence, on utilisera principalement les méthodes keydown() et keyup() avec des champs de formulaires ainsi que dans le cadre de la création de jeux JavaScript.

En plus de cela, keydown et keyup vont fournir un code indiquant quelle touche a été pressée et qu’on va pouvoir récupérer avec la propriété which de l’objet event.

See the Pen
Cours jQuery 3.3.1
by Pierre (@pierregiraud)
on CodePen.

 

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.

L’événement keypress va renvoyer le code ASCII correspondant au caractère entré (à la différence du code lié à la “touche du clavier” pressée renvoyé par keydown() et keyup()).

See the Pen
Cours jQuery 3.3.2
by Pierre (@pierregiraud)
on CodePen.

Laisser un commentaire