Détecteur de keycode JavaScript, gratuit

Comment ça marche

1. Appuyez sur une touche : cliquez dans la zone de saisie et appuyez sur n'importe quelle touche, lettres, chiffres, touches de fonction, flèches, modificateurs ou touches spéciales.
2. Lisez les codes de touche : l'outil affiche instantanément les valeurs event.key, event.code, event.keyCode (hérité) et charCode de la touche.
3. Utilisez dans votre code : copiez les valeurs exactes nécessaires pour vos écouteurs d'événements clavier ou vos implémentations de raccourcis.

Pourquoi utiliser le détecteur de keycode ?

Les événements clavier JavaScript exposent plusieurs propriétés différentes (key, code, keyCode, charCode et which) et savoir laquelle utiliser et à quelle valeur comparer est systématiquement délicat. Le détecteur de KeyCode élimine les devinettes en vous permettant d'appuyer sur une touche et de voir immédiatement toutes ses propriétés d'événement. Précieux pour construire des raccourcis clavier, gérer les touches spéciales, implémenter des hotkeys et déboguer les écouteurs d'événements clavier.

Fonctionnalités

• Toutes les propriétés d'événement : affiche event.key, event.code, event.keyCode, event.which et event.charCode pour chaque appui.
• Détection des touches modificatrices : indique si Shift, Ctrl, Alt et Meta étaient maintenues lors de l'appui.
• Prise en charge des touches spéciales : fonctionne avec les touches de fonction (F1–F12), les flèches, Entrée, Échap, Tab, Retour arrière et toutes les autres touches spéciales.
• Historique des touches : conserve un journal des appuis récents pour comparer plusieurs touches.
• Copier les valeurs : cliquez sur n'importe quelle valeur pour la copier directement dans le presse-papiers.

Questions fréquentes

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

event.key est la norme moderne, elle renvoie une chaîne lisible comme « ArrowLeft » ou « Enter ». event.keyCode est un code numérique hérité (déprécié mais encore pris en charge). Utilisez event.key pour du nouveau code ; event.keyCode pour maintenir la compatibilité avec les anciens navigateurs.

Comment détecter Ctrl+S ou d'autres combinaisons de touches ?

Les combinaisons clavier utilisent event.key combiné à des vérifications de modificateurs : if (event.ctrlKey && event.key === "s"). Appuyez sur Ctrl+S dans cet outil pour voir toutes les valeurs, puis reproduisez la même condition dans votre écouteur d'événement.

Pourquoi certaines touches affichent-elles le même keyCode ?

Les valeurs keyCode n'ont pas été normalisées et certaines touches partagent des codes selon le contexte. event.code est plus fiable, elle identifie la position physique de la touche (par ex. « KeyA ») quelle que soit la disposition du clavier, tandis qu'event.key reflète le caractère produit par cette touche.

Une histoire de 30 ans des événements clavier en JavaScript

Les événements clavier ont une histoire notoirement chaotique dans le DOM. Netscape Navigator 2 (1995) a introduit les gestionnaires originaux onkeydown, onkeypress et onkeyup avec une propriété numérique keyCode, qui n'avait pas de spec ; les navigateurs ont chacun inventé leurs propres valeurs. Internet Explorer 4 (1997) a implémenté sa propre variante avec event.keyCode comme seule propriété, tandis que Netscape s'en tenait à event.which. DOM Level 2 Events (W3C, novembre 2000) a normalisé le flux d'événements (capture/bouillonnement) mais a explicitement laissé de côté les événements clavier parce que les vendeurs ne pouvaient pas s'accorder. Le résultat : les développeurs ont écrit du code comme e.keyCode || e.which pendant plus d'une décennie. DOM Level 3 Events (W3C Working Draft 2003, Recommandation 2018) a enfin introduit le moderne event.key (caractère Unicode ou touche nommée comme «ArrowLeft») et event.code (position physique de la touche comme «KeyA», indépendant de la disposition), tout en dépréciant keyCode, charCode et which. La spécification UI Events (W3C, en cours) est la maison moderne de ce travail. Les navigateurs ont rattrapé progressivement : Chrome 51 (mai 2016), Firefox 47 (juin 2016), Safari 10.1 (mars 2017) ont tous livré le support de event.code. L'événement legacy keypress est déprécié au profit des événements beforeinput et input.

Les 5 propriétés, décodées

• event.key (moderne, utilisez ceci). Le caractère ou la touche nommée produite. Les lettres et chiffres vous donnent le caractère Unicode respectant les modificateurs et la disposition (Shift+a = «A», AZERTY position-Q = «a»). Les touches nommées sont des chaînes comme «Enter», «Escape», «ArrowLeft», «F5», «Control». Définie dans UI Events.
• event.code (moderne, utilisez pour les jeux). Identifie la touche physique sur le clavier, indépendamment de la disposition ou des modificateurs. Exemples : «KeyA», «Digit1», «ArrowUp», «ShiftLeft», «MetaLeft». Utilisez ceci pour le mouvement WASD, la navigation style vim, et les raccourcis qui doivent ignorer la disposition du clavier.
• event.keyCode (déprécié). Code numérique. 13 = Enter, 27 = Escape, 32 = Espace, 37-40 = Flèche Gauche/Haut/Droite/Bas, 65-90 = A-Z, 112-123 = F1-F12. Les valeurs n'ont jamais été normalisées, ne sont devenues cohérentes entre navigateurs que par convergence. À éviter dans le nouveau code.
• event.which (déprécié). Équivalent Netscape de keyCode. Pour la plupart des caractères imprimables et touches non-imprimables, identique à keyCode. Le vieux polyfill e.keyCode || e.which gérait les cas où l'un était 0.
• event.charCode (déprécié, seulement sur keypress). Le point de code Unicode du caractère. 97 pour «a», 65 pour «A». Ne se déclenche que sur keypress (qui est lui-même déprécié). Les événements input et beforeinput sont les remplacements modernes.
• Booléens de modificateurs. event.shiftKey, event.ctrlKey, event.altKey, event.metaKey (Commande sur macOS, touche Windows sur Windows). Vérifiez toujours les modificateurs explicitement : e.metaKey || e.ctrlKey pour «sauvegarder» multi-plateforme (Cmd+S sur Mac, Ctrl+S sur Windows/Linux).
• event.location. Distingue les modificateurs gauche vs droite et le pavé numérique. 0=standard, 1=modificateur gauche, 2=modificateur droit, 3=pavé numérique. Utile pour distinguer Shift-gauche vs Shift-droite pour les dispositions de jeu.

Où la recherche de code de touche compte vraiment

• Raccourcis clavier d'application. Cmd/Ctrl+S pour sauvegarder, Cmd/Ctrl+Z pour annuler, Cmd/Ctrl+K pour ouvrir la palette de commandes (Slack, Linear, GitHub, Notion l'utilisent tous depuis 2020 environ). Utilisez toujours event.key pour la touche imprimable et un booléen de modificateur pour la méta-touche.
• Palette de commandes et fuzzy finder. Le motif Cmd+K popularisé par Slack (2014) et Linear (2019). Écoutez le raccourci d'ouverture globalement, puis gérez la navigation ArrowUp/ArrowDown, Enter pour sélectionner, Escape pour fermer.
• Jeux navigateur et développement de jeux HTML5. Phaser, Babylon.js, Three.js. Utilisez toujours event.code pour les touches de mouvement afin que WASD fonctionne sur les claviers AZERTY (où «W» est à la position «Z»). Sebastian Lague, Notch (prototype Minecraft précoce) et les jeux itch.io ont tous touché ce piège AZERTY.
• Motifs d'accessibilité. Les dialogues modaux ont besoin d'Escape pour fermer. Les widgets Combobox ont besoin d'ArrowDown/ArrowUp/Enter/Escape. Les info-bulles doivent se fermer sur Escape. Le WAI-ARIA Authoring Practices Guide définit les motifs d'interaction clavier pour chaque widget commun ; event.key est le standard pour ces vérifications.
• Implémentation d'éditeur de texte et de code. Monaco (l'éditeur de VS Code dans le navigateur), CodeMirror, ProseMirror, Lexical mappent tous les événements clavier vers des commandes. Ils utilisent event.code pour les raccourcis clavier style vim/emacs qui ne dépendent pas de la disposition.
• Améliorations UX de formulaire. Soumettre sur Enter, blur sur Escape, avancer le focus sur Tab. Courant dans les flux de paiement, barres de recherche, champs d'autocomplétion.
• Raccourcis d'extension navigateur. Vimium, SurfingKeys, Tridactyl fournissent la navigation clavier pour tout le web. Ils écoutent au niveau du document et gèrent des séquences de touches modales complexes (gg = aller en haut, comme vim).

Erreurs courantes dans la gestion des événements clavier

• Utiliser keyCode dans le nouveau code. Déprécié depuis DOM Level 3 (2018), historiquement incohérent entre navigateurs, et casse sur les dispositions non-US (la virgule a keyCode 188 sur US, 191 sur certains claviers allemands). Utilisez event.key à la place.
• Coder en dur e.key === "w" pour le mouvement de jeu. Sur les claviers AZERTY (français), la touche W physique tape «z». Les joueurs cherchent ce qu'ils mémorisent comme le cluster WASD mais obtiennent la mauvaise entrée. Utilisez event.code === "KeyW" à la place, qui identifie la position physique.
• Vérifier seulement ctrlKey pour «sauvegarder». Sur macOS, Cmd+S est la convention ; ctrlKey est faux mais metaKey est vrai. Vérifiez toujours les deux : (e.metaKey || e.ctrlKey) && e.key === "s".
• Oublier preventDefault sur les raccourcis réservés au navigateur. Détourner Cmd+S sans preventDefault déclenche toujours Save Page As. Pareil pour Cmd+P (imprimer), Ctrl+F (recherche du navigateur), Ctrl+N (nouvelle fenêtre, ne peut pas être bloqué de toute façon), Ctrl+Tab (Chrome ne vous laissera pas). Appelez e.preventDefault() dans le gestionnaire.
• Ignorer la composition IME. Les méthodes d'entrée japonaise, chinoise, coréenne (IME) déclenchent des événements keydown pendant que l'utilisateur compose des caractères. Vérifiez e.isComposing ou utilisez l'événement compositionend avant de déclencher votre gestionnaire de raccourcis. Slack a célèbrement raté ça pour les utilisateurs japonais en 2017.
• Utiliser l'événement déprécié keypress. Ne se déclenche que pour les touches produisant des caractères (pas les touches fléchées, fonction, etc.). Déprécié ; utilisez keydown pour les raccourcis et input/beforeinput pour les changements de texte.
• Déclencher les raccourcis à chaque répétition. Maintenir une touche déclenche des événements keydown répétés. Pour les actions de bascule (ouvrir palette, changer d'onglet), vérifiez e.repeat et sortez tôt pour éviter d'enregistrer 30 commandes «ouvrir» quand l'utilisateur a accidentellement maintenu la touche.

Autres questions fréquemment posées

Pourquoi mon gestionnaire de touche ne se déclenche-t-il pas quand l'utilisateur a un clavier non-US ?

Presque toujours parce que vous vérifiez event.key pour un caractère qui n'existe qu'avec Shift sur cette disposition. Sur un clavier allemand QWERTZ, «/» est Shift+7 (pas sa propre touche) ; sur AZERTY français, les chiffres 0-9 sont tapés avec Shift+la-ligne-au-dessus. Utilisez event.code (touche physique) pour les raccourcis basés sur la position, ou event.key pour les raccourcis basés sur le contenu (où vous voulez vraiment le caractère que l'utilisateur vient de taper).

Comment gérer Cmd+K / Ctrl+K de manière cohérente entre plateformes ?

L'idiome standard : if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") { e.preventDefault(); openPalette(); }. Sur macOS, e.metaKey est la touche Cmd ; sur Windows/Linux, e.ctrlKey est ce que les utilisateurs attendent. Accepter les deux. Toujours preventDefault parce que le navigateur lie Cmd+K à «focus barre d'adresse» dans certains navigateurs. Ajoutez !e.repeat pour éviter de se déclencher sur maintien-touche.

JavaScript peut-il détecter les frappes globales en dehors de la page ?

Non, et c'est par design pour la sécurité. Le navigateur ne déclenche les événements clavier que pour la page ou l'élément focalisé. Les extensions navigateur peuvent écouter avec une portée plus large en utilisant l'API chrome.commands. Les apps natives dans Electron, Tauri, etc., peuvent utiliser des hooks globaux au niveau OS. Les apps bancaires et 2FA dépendent de cette isolation : un onglet malveillant ne peut pas keylogger votre gestionnaire de mots de passe.

Quelle est la bonne façon de détecter «vient d'être pressé» vs «en cours de maintien» ?

Pour les bascules, vérifiez !e.repeat dans le gestionnaire keydown: le premier événement a repeat: false, les événements suivants d'auto-répétition ont repeat: true. Pour les actions continues (mouvement de jeu), suivez l'état des touches dans un Set : ajoutez sur keydown, supprimez sur keyup, puis dans votre boucle de rendu vérifiez keysHeld.has("KeyW"). Cela découple l'entrée du framerate et gère plusieurs touches simultanées (déplacer + sauter).

Quelque chose est-il envoyé à un serveur quand j'appuie sur des touches ici ?

Non. Les événements clavier sont capturés localement par JavaScript et affichés sur cette page sans aucune requête réseau. Ouvrez l'onglet Network dans DevTools, tapez ; vous verrez zéro trafic sortant. Sûr pour tester dans n'importe quel contexte, y compris découvrir ce que produisent les mots de passe ou raccourcis sensibles sur votre clavier.