Visualiseur de code touche

Qu’est-ce qu’une visionneuse de codes touche ?#

Quand une touche s’enfonce, le navigateur émet un KeyboardEvent qui porte deux réponses parallèles à la question « quelle touche ? ». Le champ key dit quel caractère la pression a produit — a, A, Enter, ?. Le champ code dit quelle touche physique a été pressée — KeyA, Enter, Slash — indépendamment de la disposition. Ces deux réponses divergent dès que vous impliquez un clavier international, un modificateur ou un pavé numérique, et la différence est exactement ce que vous devez voir quand vous câblez un raccourci, un contrôle de jeu ou une fonction d’accessibilité.

Cette page capture chaque keydown dans un instantané et met chaque champ à nu : key, code, les nombres hérités keyCode et which (conservés pour déboguer du vieux code), l’emplacement location (standard / gauche / droite / pavé numérique), les modificateurs actifs, et si la pression était une auto-répétition. Un historique défilant des dernières pressions reste visible, pour que vous puissiez tracer un accord ou une séquence.

Rien n’est global : la capture n’a lieu que tant que le focus est à l’intérieur de la zone de capture, donc le reste de la page continue d’obéir normalement au clavier.

Comment l’utiliser#

1. Cliquez n’importe où dans la zone de capture en pointillés en haut (ou tabez jusqu’à elle). Elle se surligne pour montrer qu’elle écoute.
2. Pressez une touche, ou un accord. Le tableau d’instantané en dessous se met à jour à chaque keydown.
3. Lisez les lignes :
   • key — la valeur logique de la touche (le caractère ou la touche nommée que le navigateur a résolue).
   • code — la touche physique, indépendante de la disposition. C’est ce sur quoi vous matchez pour les raccourcis.
   • keyCode et which — les codes numériques dépréciés, signalés par un badge legacy. Ne matchez dessus que pour porter du vieux code qui les lit encore.
   • location — standard, left, right ou numpad. C’est ainsi que vous distinguez le Shift gauche du droit, ou le 5 du pavé numérique du 5 de la rangée du haut.
   • repeat — yes tant qu’une touche est maintenue et s’auto-répète.
   • modifiers — badges pour chacun des Ctrl, Alt, Shift, Meta qui étaient maintenus.
4. Cochez Empêcher le défaut dans la barre d’options si vous voulez que la page empêche le navigateur d’agir sur la touche (par exemple, pour empêcher Tab de déplacer le focus pendant que vous testez).
5. Utilisez Copier pour récupérer l’instantané courant, et Effacer sur le panneau d’historique pour réinitialiser la liste défilante.

Fonctionnalités clés#

• key et code côte à côte. La distinction la plus utile du traitement clavier, rendue visible à chaque pression — pour que vous voyiez immédiatement pourquoi key === "@" peut venir de Shift+Digit2 sur une disposition et d’une tout autre touche physique sur une autre.
• Conscience de l’emplacement. Les modificateurs gauche et droit sont rapportés séparément, et les touches du pavé numérique portent location: numpad. Indispensable pour les dispositions de jeu où le même chiffre signifie des choses différentes sur la rangée principale versus le pavé numérique.
• Badges de modificateurs. Ctrl, Alt, Shift et Meta (Command sur macOS, Super/Windows ailleurs) sont affichés dans l’ordre conventionnel, pour que vous puissiez lire un accord d’un coup d’œil.
• Champs hérités, clairement marqués. keyCode et which sont dépréciés et retirés des specs modernes, mais beaucoup de code existant les lit encore. Ils sont exposés avec une balise legacy visible et une note de bas de page, jamais comme réponse principale.
• Historique défilant de 20. Maintenez une touche et regardez repeat passer à yes à chaque auto-déclenchement ; pressez une séquence et remontez-la. Chaque entrée est un instantané isolé.
• Capture circonscrite. L’écouteur est lié à la zone de capture, pas à la fenêtre. Le reste de la page — tabulation, défilement — continue de fonctionner jusqu’à ce que vous focusiez à nouveau la zone.

Exemple commenté#

Une source classique de confusion est la différence entre le 1 de la rangée du haut et le 1 du pavé numérique. Ils produisent le même caractère, mais ce n’est pas la même touche.

Pressez le 1 de la rangée du haut et l’instantané indique :

key        1
code       Digit1
keyCode    49      (legacy)
which      49      (legacy)
location   standard
repeat     no
modifiers  none

Pressez maintenant le 1 du pavé numérique (avec Verr Num activé) et l’instantané indique :

key        1
code       Numpad1
keyCode    97      (legacy)
which      97      (legacy)
location   numpad
repeat     no
modifiers  none

Même key, mais code différent, location différent, code hérité différent. Si vous liez un raccourci, vous matchez sur code === "Digit1" pour signifier « la rangée au-dessus des lettres », et sur code === "Numpad1" pour signifier « le pavé numérique » — et vous évitez le piège de matcher sur key === "1", qui se déclenche pour les deux.

FAQ#

Dois-je matcher sur key ou sur code ?#

Cela dépend de ce que vous construisez. Matchez sur code pour les raccourcis et les contrôles de jeu, où la position physique de la touche compte et où vous ne voulez pas que le binding change quand l’utilisateur passe à une disposition Dvorak ou non latine. Matchez sur key pour la saisie de texte, où le caractère produit est ce qui vous intéresse (? versus /, ou les caractères composés par touche morte). Pour les accords de modificateurs, vérifiez les drapeaux de modificateur (ctrlKey, metaKey…) plutôt que la propre valeur key du modificateur.

Pourquoi keyCode et which sont-ils marqués « legacy » ?#

Ils sont dépréciés et retirés de la spec UI Events. Les navigateurs les remplissent encore pour compatibilité, mais leurs valeurs n’ont jamais été cohérentes d’un navigateur ou d’une disposition à l’autre (la même touche physique pouvait rapporter des nombres différents). Le code moderne devrait lire key et code. Ils sont affichés ici seulement pour que vous puissiez déboguer ou porter du vieux code qui dépend encore des nombres — ne les utilisez jamais pour de nouveaux bindings.

La page ne capture pas mes frappes. Pourquoi ?#

La capture est circonscrite à la zone en pointillés. Si le focus s’est déplacé ailleurs — parce que vous avez tabé hors, ou cliqué sur un autre contrôle — la zone arrête d’écouter. Recliquez à l’intérieur de la zone (elle se surlignera) et les pressions s’enregistrent à nouveau. Cette circonscription est délibérée : elle garde le reste de la page accessible au clavier.

La touche Meta désigne-t-elle Command ou Windows ?#

Les deux — Meta est la touche « super » de la plateforme : Command sur macOS, la touche Windows / Super sur Linux et Windows. Le badge affiche Meta plutôt que de deviner l’OS, parce que le champ sous-jacent metaKey est ce que votre code doit réellement tester.