Visionneuse d'événements clavier
0 événements 200 derniers gardés
ÉvénementkeycodekeyCodePos.ModificationRépét.Δ ms
Les événements s'affichent ici, récents en haut.
key, code et keyCode
3 propriétésUn KeyboardEvent identifie un appui de trois façons. Sur un clavier AZERTY, la même touche physique qu'en QWERTY donne une autre valeur de key, le même code, et un keyCode qui suit la lettre.
PropriétéCe qu'elle donneQWERTYAZERTY
keyLe caractère tapé selon la disposition, ou le nom de la touche (Enter, Shift)qacodeLa touche physique, quelle que soit la dispositionKeyQKeyQkeyCodeUn ancien numéro, obsolète mais toujours envoyé8165Utilisez code pour les raccourcis par position (ZQSD), et key pour le texte et les raccourcis par lettre.
location
4 valeursLa propriété location indique de quel côté se trouve une touche en double, ou qu'une touche est sur le pavé numérique.
0 · StandardLa plupart des touches, présentes une seule fois sur le clavier
1 · GaucheMaj, Ctrl, Alt et Meta gauches
2 · DroiteMaj, Ctrl, Alt et Meta droites
3 · Pavé numériqueLes touches du pavé numérique, Entrée comprise
Méthodes d'entrée et keyCode 229
IMEAvec une méthode d'entrée chinoise, japonaise ou coréenne active, l'éditeur de méthode d'entrée (IME) prend les touches en premier. La page voit key « Process » et keyCode 229, et le texte arrive dans des événements de composition. En tapant ni pour un mot chinois :
keydownkey « Process » · keyCode 229compositionstartLa méthode d'entrée commence un motcompositionupdatedata n, puis nikeydownEspace choisit un candidatcompositionenddata est le mot choisiinputinputType insertCompositionText
Vérifiez isComposing avant de réagir à une touche, sinon l'Entrée qui choisit un mot envoie aussi le formulaire.
Touches de modification
getModifierStateChaque événement porte les touches de modification maintenues à cet instant. getModifierState() indique aussi les touches de verrouillage.
ShiftshiftKeyControlctrlKeyAltaltKeyMetametaKey (Windows, ou Commande sur Mac)CapsLockÉtat du verrouillage, pas si la touche est enfoncéeNumLockÉtat du verrouillage, souvent inconnu sur MacAltGraphAlt Gr, l'Alt droite des dispositions françaises et européennesScrollLockRare sur les claviers actuelsQuestions fréquentes
8 questionsQuelle différence entre event.key et event.code ?
Caractère ou touche physiquekey est ce que la touche tape dans la disposition actuelle, comme a ou A. code est la touche physique, comme KeyQ, et reste le même dans toutes les dispositions. Cette visionneuse d'événements affiche les deux pour chaque appui.
Pourquoi keyCode vaut-il 229 ?
Une méthode d'entréeUne méthode d'entrée (IME) traite la touche. key vaut « Process » et le texte arrive plus tard, dans les événements de composition et input. Tapez dans le champ pour les voir.
keyCode est-il obsolète ?
OuikeyCode, which et charCode sont obsolètes, mais les navigateurs les envoient encore. Utilisez plutôt key ou code dans vos nouveaux projets.
Pourquoi Fn n'affiche-t-elle aucun événement ?
Jamais envoyéeLe clavier gère Fn lui-même et n'envoie aucun code de touche : aucune page web ne la reçoit. La touche appuyée avec Fn, comme F5 ou une touche de volume, s'affiche bien.
Pourquoi ne puis-je pas capter Ctrl+W ou Ctrl+T ?
Gardés par le navigateurLe navigateur garde certains raccourcis pour lui : fermer l'onglet, nouvel onglet, nouvelle fenêtre. Bloquer les actions par défaut arrête la plupart des autres touches, comme Tab, F5 ou /, mais pas celles-ci.
Pourquoi une touche maintenue répète-t-elle keydown ?
Répétition automatiqueLe système répète une touche maintenue. Chaque répétition est un keydown avec repeat à true, et un seul keyup arrive au relâchement.
Pourquoi des keyup manquent-ils sur Mac ?
Commande maintenueTant que Commande est maintenue, les navigateurs sous macOS n'envoient pas de keyup pour les autres touches, et aucun n'arrive non plus après le relâchement de Commande. Test clavier Mac →
Mes frappes sont-elles envoyées en ligne ?
Pas par le testLes événements sont traités dans ce navigateur uniquement. Le code du test ne les envoie pas, et ils sont effacés quand vous fermez la page. Politique de confidentialité →