Visualiseur de codes clavier en ligne. KeyCode Inspector

Outil en ligne gratuit pour voir en temps réel le event.key, event.code, event.which et la location de n'importe quelle touche de clavier. Génère des extraits de code JavaScript prêts à l'emploi.

Appuyez sur une touche

N'importe quelle touche de votre clavier pour voir son code

Studio d'utilitaires

Voulez-vous cet outil sur votre site web ?

Personnalisez les couleurs y le mode sombre pour WordPress, Notion ou votre propre site.

Questions fréquemment posées

Quelle est la différence entre event.key et event.code ?

event.code représente la touche physique du clavier, indépendamment de la langue configurée. event.key représente le caractère généré, qui peut changer si vous appuyez sur Shift ou utilisez une autre langue. Utilisez code pour les contrôles de jeu ; utilisez key pour la saisie de texte et les raccourcis sémantiques.

Qu'est-ce que event.which et pourquoi est-il déprécié ?

event.which est une propriété héritée qui renvoie un code ASCII numérique de la touche. Elle est marquée comme dépréciée dans les standards modernes car event.key et event.code la remplacent avec des informations plus précises et lisibles. Elle est affichée dans cet outil à des fins éducatives.

Que signifie la propriété location ?

La propriété location indique où la touche est physiquement située sur le clavier : Standard (position normale), Left (modificateur gauche), Right (modificateur droit) ou Numpad (pavé numérique). Elle est utile pour distinguer la touche CTRL gauche de la droite, par exemple.

Fonctionne-t-il avec les claviers internationaux et les dispositions non-QWERTY ?

Oui. L'outil affiche exactement ce que le navigateur signale pour votre configuration de clavier. event.code renverra toujours le nom QWERTY de la position physique, tandis que event.key affichera le caractère réel selon votre langue.

# Comprendre les événements clavier en JavaScript

Lorsqu'un utilisateur appuie sur une touche, le navigateur déclenche trois événements : keydown, keypress et keyup. Chacun expose des propriétés avec des informations sur la touche pressée, mais elles ne sont pas toutes équivalentes ni recommandées.

# Propriétés clés de l'événement

event.code — La touche physique

Retourne l'identifiant de la position physique de la touche sur le clavier, en utilisant la nomenclature QWERTY. Par exemple, la touche "A" sur un clavier AZERTY retourne KeyQ. Idéal pour les contrôles de jeu où la position importe, pas le caractère.

event.key — Le caractère généré

Retourne la valeur du caractère généré selon la langue et les modificateurs actifs. Appuyer sur Shift+A retourne "A" ; sans Shift retourne "a". Pour les touches spéciales, retourne des noms comme "Enter", "Escape", "ArrowUp".

# Quand utiliser chaque propriété

Utilisez event.code pour les contrôles de jeu (WASD indépendamment de la langue) et event.key pour détecter des caractères spécifiques ou des raccourcis sémantiques comme Ctrl+C.
Les propriétés event.which et event.keyCode sont officiellement dépréciées selon le standard W3C. Bien que les navigateurs modernes continuent de les supporter par compatibilité, elles ne doivent pas être utilisées dans du nouveau code.

Références Bibliographiques