Keyboard Key Code Viewer

Appuyez sur une touche pour obtenir le KeyCode JavaScript

Trouver le key code JavaScript de n'importe quelle touche

Aperçu

Quand vous construisez des interactions clavier sur le web, il faut savoir exactement quelle valeur produit une frappe — son `key`, son `code` et l'ancien `keyCode`. Un visualiseur de key codes les montre en direct : appuyez sur n'importe quelle touche et il affiche les identifiants que verra votre JavaScript. Cet outil capte les événements clavier dans votre navigateur pour brancher raccourcis et gestionnaires sans deviner.

Comment utiliser (étape par étape)

  1. 1

    Ciblez l'outil et appuyez sur une touche

    Cliquez dans le visualiseur et appuyez sur la touche ou la combinaison à inspecter.

  2. 2

    Lisez les identifiants

    Voyez le `key`, le `code`, le `keyCode` et quels modificateurs étaient enfoncés.

  3. 3

    Utilisez la bonne propriété

    Copiez la valeur adaptée à votre gestionnaire — en général `key` pour les caractères, `code` pour les positions physiques de touche.

Comment ça marche

L'outil écoute les événements clavier et, à l'appui d'une touche, lit les propriétés de l'événement : `key` (le caractère ou nom, comme 'a' ou 'Enter'), `code` (la touche physique, comme 'KeyA'), le numérique `keyCode` (déprécié mais encore vu) et l'état des modificateurs (Maj, Ctrl, Alt, Meta). Il les affiche aussitôt. Tout tourne localement dans votre navigateur — aucune frappe n'est enregistrée ni envoyée.

Quand l'utiliser

Construire un raccourci clavier et avoir besoin du `key` ou `code` exact pour la correspondance. Déboguer pourquoi un gestionnaire ne se déclenche pas pour une touche. Distinguer des touches partageant un caractère selon les dispositions. Détecter des combinaisons de modificateurs pour un raccourci. Apprendre la différence entre `key`, `code` et `keyCode`. Vérifier ce que rapporte une touche spéciale ou multimédia.

Questions Fréquentes

`key` est la valeur produite, affectée par la disposition et les modificateurs (Maj+a donne 'A'). `code` est la position physique de la touche, indépendante de la disposition (toujours 'KeyA' pour cette touche). Utilisez `key` pour les caractères, `code` pour des raccourcis de position physique comme ZQSD/WASD.

Notes Importantes

Certaines touches se comportent différemment selon les navigateurs, systèmes d'exploitation et dispositions de clavier — surtout touches mortes, saisie IME et touches multimédias. Testez sur vos plateformes cibles au lieu de supposer que les valeurs d'une machine valent partout.

Afficheur de Code de Touche | Super Easy Utils