Détecteur de KeyCode JavaScript
Appuyez sur une touche pour obtenir ses valeurs keyCode, key, code et which
Capture du clavier
Cliquez ici et appuyez sur une touche
Les événements clavier sont capturés uniquement dans cette zone. Tab enregistre la touche et déplace le focus vers le contrôle suivant.
Pour obtenir des événements clavier complets, utilisez un clavier physique. Les claviers mobiles peuvent omettre certaines propriétés.
Frappes récentes
Vos 10 dernières frappes apparaîtront ici.
Détails de l’événement clavier
event.keyevent.codeevent.keyCodeObsolèteevent.whichObsolèteevent.locationevent.repeatTouches de modification
Placez le focus dans la zone de capture pour examiner un événement clavier.
À propos du Détecteur de KeyCode JavaScript
Le Détecteur de KeyCode JavaScript est un outil interactif gratuit pour développeurs, qui affiche instantanément toutes les propriétés de l’événement clavier dès que vous appuyez sur une touche. Que vous créiez des raccourcis clavier, des commandes de jeu ou une navigation accessible, connaître les valeurs exactes de event.key, event.code, event.keyCode et event.which est indispensable pour écrire un JavaScript fiable et compatible avec tous les navigateurs.
Les applications web modernes s’appuient largement sur la gestion des événements clavier, de la validation de formulaires aux outils de collaboration en temps réel. Cet utilitaire de recherche de keycode supprime les approximations : il affiche le code de la touche physique, la valeur logique de la touche, l’identifiant de position et tous les états des modificateurs (Shift, Ctrl, Alt, Meta) au moment de l’appui, directement dans votre navigateur et sans aucune configuration.
Contrairement aux tableaux de référence statiques des keycodes, ce testeur d’événements clavier JavaScript en direct capture de vrais événements du navigateur, ce qui permet de vérifier le comportement selon les systèmes d’exploitation et les dispositions de clavier. Il indique aussi clairement les propriétés obsolètes, pour vous aider à écrire du code pérenne conforme aux standards W3C Keyboard Event actuels.
Fonctionnalités principales
- Affichage en temps réel de
event.key,event.code,event.keyCode,event.whichetevent.location - Indicateurs visuels des touches de modification affichant les états de Shift, Ctrl, Alt et Meta
- Badges d’obsolescence sur les propriétés héritées comme keyCode et which
- Copie en un clic de la valeur de n’importe quelle propriété de l’événement
- Export de toutes les données de la touche sous forme d’objet JSON mis en forme
- Tableau d’historique des 10 dernières touches pressées, pour comparer
- Distinction automatique des touches gauche, droite et du pavé numérique
- Rendu visuel de la touche pour l’identifier facilement
- Compatible avec toutes les touches, y compris les touches de fonction, les flèches et les caractères spéciaux
- Design entièrement adaptatif avec prise en charge du mode sombre
Comment utiliser le Détecteur de KeyCode JavaScript
- Activez la zone de saisie : cliquez n’importe où dans la zone en pointillés située en haut de l’outil pour activer l’écoute du clavier.
- Appuyez sur une touche : pressez n’importe quelle touche de votre clavier et toutes les propriétés de l’événement s’affichent instantanément dans la grille ci-dessous.
- Vérifiez les modificateurs : consultez les indicateurs Shift, Ctrl, Alt et Meta pour voir quels modificateurs étaient actifs pendant l’appui.
- Copiez les valeurs : cliquez sur l’icône de copie à côté d’une propriété pour copier sa valeur, ou utilisez le bouton « Tout copier en JSON » pour exporter toutes les propriétés d’un coup.
- Comparez les touches : appuyez sur plusieurs touches à la suite, puis descendez jusqu’au tableau d’historique pour comparer leurs codes côte à côte.
- Effacez et recommencez : cliquez sur le bouton Effacer pour réinitialiser toutes les données et lancer une nouvelle session de test.
Cas d’usage
- Développement de raccourcis clavier : identifiez les bonnes valeurs de key et de code pour implémenter des raccourcis personnalisés dans des applications web.
- Commandes de jeu : associez des touches physiques à des actions de jeu en vérifiant event.code, pour des raccourcis indépendants de la disposition du clavier.
- Test d’accessibilité : vérifiez que la navigation au clavier fonctionne correctement et que tous les éléments interactifs réagissent aux touches attendues.
- Migration de code hérité : trouvez les équivalents event.key modernes des valeurs event.keyCode obsolètes utilisées dans d’anciens projets.
- Débogage multi-navigateurs : confirmez que les événements clavier produisent des valeurs cohérentes dans Chrome, Firefox, Safari et Edge.
- Validation de formulaires : déterminez les valeurs exactes des touches pour autoriser ou bloquer certains caractères dans les champs de texte.
- Rédaction de tutoriels et de documentation : retrouvez rapidement des données de keycode exactes à inclure dans des guides pour développeurs et de la documentation de référence.
- Pavé numérique ou clavier principal : utilisez la propriété location pour distinguer les touches du pavé numérique de celles de la rangée de chiffres standard.
Questions fréquentes
Quelle est la différence entre event.key et event.code ?
event.key renvoie la valeur logique de la touche (par exemple « a » ou « A » selon Shift), tandis que event.code renvoie la touche physique du clavier (par exemple « KeyA »), quels que soient les modificateurs ou la disposition du clavier. Utilisez event.key pour la saisie de caractères et event.code pour les raccourcis basés sur la position.
Peut-on encore utiliser event.keyCode sans risque ?
event.keyCode est officiellement obsolète selon le W3C et peut se comporter de façon incohérente d’un navigateur à l’autre. Pour les nouveaux projets, utilisez event.key ou event.code. Cependant, de nombreuses bases de code héritées s’appuient encore sur keyCode : l’outil l’affiche donc pour référence de rétrocompatibilité.
Pourquoi le champ location est-il important ?
La propriété event.location distingue les touches présentes à plusieurs endroits du clavier, comme Shift gauche et Shift droit, ou la rangée de chiffres et le pavé numérique. C’est essentiel pour les applications qui doivent différencier des touches en double.
Cet outil est-il gratuit ?
Oui, le Détecteur de KeyCode JavaScript est entièrement gratuit, sans inscription, sans limite d’utilisation et sans frais cachés. Vous pouvez l’utiliser aussi souvent que nécessaire pour le développement et les tests.
Mes données sont-elles en sécurité ?
Absolument. Toute la détection des touches se fait entièrement dans votre navigateur grâce aux événements clavier JavaScript natifs. Aucune frappe ni donnée d’événement n’est jamais envoyée à un serveur. Votre saisie reste totalement privée sur votre appareil.
Cela fonctionne-t-il sur mobile ?
L’outil fonctionne mieux avec un clavier physique. Sur mobile, le clavier à l’écran peut ne pas déclencher toutes les propriétés de l’événement de façon cohérente. Pour des résultats fiables, utilisez un ordinateur de bureau ou portable, ou connectez un clavier externe à votre appareil mobile.
Astuces et bonnes pratiques
- Privilégiez event.key pour la saisie de caractères : il tient compte automatiquement de la disposition du clavier, de la langue et de l’état des modificateurs.
- Utilisez event.code pour les commandes de jeu : la position physique des touches reste la même quelle que soit la disposition du clavier de l’utilisateur (QWERTY, AZERTY, Dvorak).
- Testez toujours les combinaisons de modificateurs : appuyez sur Ctrl+Shift+touche ou Alt+touche pour confirmer que vos écouteurs de raccourcis captent la bonne combinaison.
- Repérez les tendances dans l’historique : comparer plusieurs appuis de touches aide à repérer des incohérences ou à trouver plus vite les bons codes.
- Exportez en JSON pour la documentation : utilisez la fonction « Tout copier en JSON » pour coller des données de touches exactes directement dans les commentaires de votre code ou dans la documentation pour développeurs.
- Testez sur plusieurs navigateurs : les valeurs des événements clavier peuvent varier d’un navigateur à l’autre, surtout pour les touches spéciales. Vérifiez toujours vos navigateurs cibles.