Testeur d'événements clavier

event.key : la valeur logique de la touche — ce que la touche produit en fonction de la disposition du clavier et des modificateurs. « a » sans modificateurs, « A » avec Maj, « Enter », « ArrowLeft ». Sensible à la locale. event.code : l'emplacement physique de la touche sur le clavier, indépendant de la disposition. « KeyA », « Enter », « ArrowLeft », « Digit1 ». Le même code que Maj soit maintenu ou non. event.keyCode (déprécié) : un code numérique. Varie selon le navigateur et le système d'exploitation. Utilisez plutôt event.key ou event.code. Bonne pratique : utilisez event.key pour l'entrée de caractères, event.code pour les raccourcis basés sur la position (comme WASD dans les jeux).

Vérifiez les propriétés booléennes sur l'événement : event.ctrlKey, event.shiftKey, event.altKey, event.metaKey (⌘ sur Mac, ⊞ sur Windows). Exemple : if (event.ctrlKey && event.key === "s") saveDraft(). Les touches de modification elles-mêmes déclenchent des événements keydown avec les valeurs de clé « Control », « Shift », « Alt », « Meta ». Pour les raccourcis multiplateformes : utilisez ctrlKey pour Ctrl sur Windows/Linux mais metaKey pour ⌘ sur Mac : const isModKey = event.ctrlKey || event.metaKey. KeyboardEvent.getModifierState("CapsLock") vérifie les états de modificateurs persistants.

keydown : se déclenche quand la touche est d'abord enfoncée. Se déclenche à plusieurs reprises si maintenue enfoncée. Fonctionne pour toutes les touches y compris Ctrl, Maj, touches fléchées. Meilleur pour : raccourcis, commandes de jeu, prévention par défaut. keypress (déprécié) : se déclenche uniquement pour les touches produisant des caractères. Ne se déclenche pas pour les touches fléchées, retour arrière, etc. Déprécié en faveur de keydown + event.key. keyup : se déclenche quand la touche est relâchée. Se déclenche une seule fois par appui de touche. Meilleur pour : détecter quand une touche a été enfoncée sans répétition. Les événements d'entrée (input, change) : meilleurs pour le suivi de l'entrée de texte que les événements clavier.

Appelez event.preventDefault() dans le gestionnaire keydown. Exemple : document.addEventListener("keydown", (e) => { if (e.ctrlKey && e.key === "s") { e.preventDefault(); save(); } }). Limitations : certains raccourcis au niveau du système d'exploitation (Ctrl+Alt+Suppr, touche Win, mission control) ne peuvent pas être empêchés. Les raccourcis du navigateur varient selon le navigateur. Dans les iframes, certains raccourcis peuvent être interceptés par le parent. Événements synthétiques React : event.nativeEvent.preventDefault() ou event.preventDefault() fonctionnent tous les deux. Remarque : event.stopPropagation() empêche l'événement de se propager, mais ne prévient pas le comportement par défaut du navigateur.

React utilise des événements synthétiques : onKeyDown, onKeyUp, onKeyPress (déprécié). Exemple : <input onKeyDown={(e) => { if (e.key === "Enter") submit(); if (e.key === "Escape") cancel(); }}. Pour les raccourcis globaux : utilisez useEffect pour ajouter/supprimer des écouteurs d'événements natifs. Supprimez toujours les écouteurs en nettoyage : useEffect(() => { const handler = (e) => {...}; window.addEventListener("keydown", handler); return () => window.removeEventListener("keydown", handler); }, []). Pour les systèmes de raccourcis complexes, utilisez des bibliothèques comme react-hotkeys-hook ou tinykeys.