Développement

Informations sur le code clé

Capturez un événement keydown du navigateur et inspectez les indicateurs de clé, de code, de keyCode, d'emplacement et de modificateur pour le débogage des raccourcis clavier.

Gratuit Sans inscription Fonctionne dans votre navigateur

Espace de travail de l’outil

Qu'est-ce qu'un outil d'informations sur les codes clés ?

Un outil d'informations sur les codes clés capture un événement de clavier dans le navigateur et affiche les champs que les développeurs inspectent habituellement lors de la création de gestionnaires de raccourcis ou d'interactions d'accessibilité. Cette implémentation enregistre une pression sur le bouton de capture sur la page et imprime la valeur de la clé, le code physique, le keyCode hérité, l'emplacement de la clé et les états des modificateurs Ctrl, Alt, Shift et Meta. Il est intentionnellement léger, de sorte qu'il n'enregistre pas les événements de saisie, les séquences d'événements, la synchronisation des répétitions ou les détails de la composition IME.

Comment utiliser l'outil d'informations sur les codes clés

  1. 1Cliquez sur la zone de capture intitulée Cliquez ici, puis appuyez sur une touche pour que le bouton ait le focus clavier.
  2. 2Appuyez sur la touche ou la combinaison de raccourci que vous souhaitez inspecter et laissez la page capturer cet événement keydown.
  3. 3Lisez la zone de sortie Key event pour les indicateurs de clé, de code, de code de clé, d'emplacement et de modificateur, puis répétez le processus avec une autre clé si vous devez comparer les résultats.

Cas d'utilisation courants de l'inspection des codes clés

Création de raccourcis clavier

Confirmez la combinaison exacte de touches et de modificateurs que votre application reçoit avant de connecter des palettes de commandes, des raccourcis d'éditeur ou des raccourcis clavier de navigation.

Comparaison des clés physiques et logiques

Vérifiez en quoi le code et la clé diffèrent sur les mises en page internationales ou lorsque la même clé physique produit un caractère différent de celui attendu.

Débogage de l'utilisation du keyCode hérité

Capturez l’ancienne valeur keyCode aux côtés des champs modernes lorsque vous prenez toujours en charge les chemins de code ou les bibliothèques qui s’appuient sur les anciennes API de clavier.

Questions fréquentes

Cet outil enregistre-t-il tout ce que je tape sur la page ?

Non. Il capture uniquement le keydown envoyé au bouton focalisable dédié après avoir cliqué dessus, et les valeurs capturées restent dans la page plutôt que d'être envoyées à un service distant.

Pourquoi la clé et le code peuvent-ils être différents pour une même presse ?

La clé reflète généralement le caractère ou l'action logique produite par votre mise en page, tandis que le code identifie la position physique de la clé. Les deux sont utiles lorsque le comportement des raccourcis doit survivre aux modifications de mise en page.