Utilia
Catégories ▾
Langue: fr ▾

Code des touches du clavier

Appuyez sur une touche pour afficher ses valeurs JavaScript event.key, event.code, keyCode, which et location, avec historique et table des keycodes.

Cliquez sur « Capturer les touches » ou dans le cadre ci-dessous, puis appuyez sur une touche. Cliquez en dehors du cadre pour rendre le clavier à la page.

event.key Appuyez sur une touche keyCode – Tab, les flèches et les raccourcis sont aussi capturés ici.
event.key
–
event.code
–
event.keyCode
–
event.which
–
event.location
–
event.repeat
–
Verrouillages actifs
–
Modificateurs
ctrlKey shiftKey altKey metaKey
Historique des touches (la plus récente en haut)
Historique des touches (la plus récente en haut)
ÉvénementkeycodekeyCodelocationModificateursrepeat
Table de référence des codes (QWERTY US)

Table de référence des codes (QWERTY US)
keycodekeyCodelocationRemarque

Les valeurs de key sont celles d’une disposition US sans modificateur : une autre disposition (AZERTY…) produit d’autres caractères pour le même code. keyCode et which sont obsolètes, mais encore très utilisés.

Comment trouver le code d’une touche

  1. Cliquez sur Capturer les touches ou directement dans le grand cadre. Une bordure colorée indique qu’il écoute le clavier.
  2. Appuyez sur n’importe quelle touche ou combinaison. Le grand affichage montre la valeur key et l’ancien keyCode ; les cartes en dessous détaillent event.key, event.code, event.keyCode, event.which, event.location, event.repeat et les Verrouillages actifs (Verr. Maj, Verr. Num, Alt Gr).
  3. Les pastilles Modificateurs s’allument pour ctrlKey, shiftKey, altKey et metaKey.
  4. Copiez le Code JavaScript pour cette touche. La liste Tester permet de choisir entre event.key, event.code ou event.keyCode (obsolète).
  5. Consultez l’Historique des touches (la plus récente en haut) pour comparer plusieurs appuis. Cochez Journaliser aussi les événements keyup pour voir aussi les relâchements.
  6. Parcourez ou filtrez la Table de référence des codes (QWERTY US) pour obtenir une valeur sans appuyer sur la touche.

Tant que le cadre a le focus, l’action par défaut des touches est bloquée : Tab, les flèches, Retour arrière ou Ctrl+S sont capturés au lieu de déplacer le focus ou d’ouvrir une fenêtre. Cliquez en dehors du cadre pour rendre le clavier à la page. Certains raccourcis sont traités par le système d’exploitation avant d’atteindre le navigateur (Alt+Tab, Ctrl+Alt+Suppr, Cmd+Tab, souvent Impr. écran) : aucune page web ne peut les lire.

key, code ou keyCode : lequel utiliser ?

Un KeyboardEvent transporte plusieurs valeurs qui répondent à des questions différentes :

Propriété Ce qu’elle indique Exemple (touche A d’un clavier AZERTY)
key Le caractère ou la touche nommée produite, selon la disposition et les modificateurs "a", "A" avec Maj
code La position physique de la touche, indépendante de la disposition "KeyQ"
keyCode / which Un ancien code numérique, en général le code ASCII de la lettre majuscule 65
location 0 standard, 1 gauche, 2 droite, 3 pavé numérique 0

Utilisez key quand le sens compte : Entrée pour valider, Échap pour fermer, « ? » pour ouvrir l’aide. Préférez code pour les jeux et les raccourcis liés à la position des touches, comme les déplacements ZQSD/WASD, qui doivent rester au même endroit sur un clavier AZERTY, QWERTY ou QWERTZ. Évitez keyCode et which dans du code neuf : ils sont obsolètes, leurs valeurs changent d’un navigateur à l’autre pour la ponctuation (Firefox envoie 59 pour le point-virgule là où Chrome envoie 186) et ils ne distinguent ni les deux touches Maj ni les deux touches Entrée. Ils restent utiles à connaître pour maintenir du code ancien, c’est pourquoi cet outil les affiche.

À propos du code généré

L’écouteur proposé correspond exactement à la touche pressée, avec Ctrl, Alt et Meta. Pour un caractère imprimable testé avec key, Maj est omis, car il est déjà pris en compte dans la valeur : Maj+1 donne "1" sur un clavier AZERTY mais "!" sur un clavier US. Si vous appuyez sur un modificateur seul, son indicateur n’est pas répété. N’oubliez pas que metaKey correspond à la touche Cmd sur Mac et à la touche Windows sur PC : un raccourci multiplateforme teste souvent event.ctrlKey || event.metaKey.

Questions fréquentes

Pourquoi keyCode donne-t-il le même nombre pour deux caractères ?

keyCode identifie la touche, pas le caractère. « a » et « A » partagent le code 65. Lisez key pour obtenir le vrai caractère produit.

Pourquoi ma touche A s'affiche-t-elle comme KeyQ ?

code nomme les touches d’après leur position sur un clavier QWERTY américain. La touche A d’un clavier français se trouve à l’emplacement du Q américain : son code vaut donc KeyQ et sa valeur key vaut « a ».

Que signifie « Dead » dans event.key ?

C’est une touche morte, comme ^ ou ¨ sur un clavier français, qui attend la touche suivante pour composer une lettre accentuée. Le caractère final arrive avec l’événement de la touche suivante ou dans l’événement input d’un champ de texte.

Pourquoi event.repeat indique-t-il « oui » ?

La touche est maintenue enfoncée et le système envoie des répétitions automatiques. Testez event.repeat pour les ignorer, par exemple pour ne déclencher un raccourci qu’une fois.

Ce que je tape est-il enregistré ou envoyé ?

Non. Les événements clavier sont lus par cette page dans votre navigateur et ne sont jamais transmis. L’historique disparaît quand vous rechargez ou quittez la page.

Outils similaires