JavaScript permet de gérer des événements. Pour chaque événement, un objet Event est créé et permet d'accéder à beaucoup d'informations sur l'événement actuellement déclenché. Cela permet par exemple :
La détection d'une touche du clavier se fait en ajoutant un gestionnaire d'événement sur le document c'est à dire sur la page HTML tout entière.
// Lorsqu'une touche est appuyée, lancer une fonction document.addEventListener('keydown', fonctionToucheEnfoncee); // Lorsqu'une touche est relachée, lancer une fonction document.addEventListener('keyup', fonctionToucheRelachee);
La fonction appelée reçoit en paramètre l'objet Event et peut donc accéder aux informations liées à l'événement :
// gestion de l'appui d'une touche function fonctionToucheEnfoncee(event) { // touche haut appuyée if(e.keyCode == '38') { // action à faire } // Gestion du relachement d'une touche function fonctionToucheRelachee(event) { // touche haut relachée if(e.keyCode == '38') { // action à faire }
Les événements keyup et keydown capturent toutes les frappes de touches : les lettres, chiffres, touches de fonction, flèches, ALT, CTRL, etc.
L'événement keypress capture uniquement les touches qui écrivent un caractère et non pas les touches qui n'affichent pas de caractère comme CTRL, ALT, etc.
Exemple pour la combinaison de touche Maj + A est gérée :
La propriété keyCode de l'objet Event renvoie le code ASCII de la touche pressée. Voici quelques exemples de touche et de leur code ASCII :
| Touche | Code ASCII |
|---|---|
| Flèche gauche | 37 |
| Flèche haut | 38 |
| Flèche droite | 39 |
| Flèche bas | 40 |