Activité Javascript N°2 - gérer les touches du clavier

Présentation

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 :

lors de l'appui d'un touche du clavier de connaître de quelle touche il s'agit,

pour la souris d'avoir les coordonnées du clic.

La gestion des touches du clavier

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 : l'événement keypress détectera uniquement un A majuscule, les événements keyup et keydown se déclencheront deux fois, une fois pour la touche Maj et une deuxième fois pour la touche A.

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

Activité Les langages pour créer des sites Web ...

Les langages pour créer des sites Web