Les dernières versions de Chrome ont vu deux ajouts aux KeyboardEvents, qui sont utilisés comme paramètre transmis aux écouteurs d'événements keydown, keypress et keyup. L'attribut code (ajouté dans Chrome 48) et l'attribut key (ajouté dans Chrome 51) permettent aux développeurs d'obtenir des informations qui seraient autrement difficiles à obtenir à l'aide d'attributs obsolètes.
Attribut code
L'attribut code est le premier. Il s'agit d'une chaîne représentant la touche enfoncée pour générer KeyboardEvent, sans tenir compte de la disposition de clavier actuelle (par exemple, QWERTY par rapport à Dvorak), de la langue (par exemple, anglais par rapport au français) ni des touches de modification.
Cela est utile lorsque vous vous intéressez à la clé physique enfoncée plutôt qu'au caractère auquel elle correspond. Par exemple, si vous écrivez un jeu, vous pouvez utiliser un certain ensemble de touches pour déplacer le joueur dans différentes directions. Ce mappage doit idéalement être indépendant de la disposition du clavier.
Attribut clé
Ensuite, nous avons le nouvel attribut key. Il est également défini sur une chaîne, mais alors que code renvoie des informations sur la touche physique enfoncée, key contient le caractère généré par cette touche, en tenant compte de la disposition du clavier actuelle, des paramètres régionaux et des touches de modification.
Examiner la valeur de l'attribut key est utile lorsque vous devez savoir quel caractère s'affiche à l'écran comme si l'utilisateur avait saisi du texte dans une zone de saisie.
Qu'est-ce que cela signifie concrètement ?
Pour donner un exemple concret, supposons que votre utilisateur utilise un clavier américain avec une disposition QWERTY. Si vous appuyez sur la touche physique Q de ce clavier, un KeyboardEvent est généré, avec un attribut code défini sur "KeyQ". Cela est valable quelle que soit la disposition du clavier et quelles que soient les autres touches de modification. À titre de comparaison, sur un clavier français (AZERTY), cette touche aurait toujours un code de "KeyQ", même si la lettre imprimée sur le capuchon de touche est un "a".
Appuyer sur la touche physique Q de ce même clavier américain génère généralement un KeyboardEvent avec key défini sur "q" (sans touche de modification), ou "Q" (avec Maj ou Verr Maj), ou "œ" (sur OS X, avec Alt). Sur un clavier AZERTY français, cette même touche génère un "a" (ou un "A" avec Maj ou Majuscule). Pour les autres dispositions de clavier, la valeur key peut être "й", "ض", "ㅂ", "た" ou un autre caractère.
Pour revenir à notre exemple de jeu précédent, si vous souhaitez que votre jeu utilise les touches ZQSD pour le mouvement, vous pouvez utiliser l'attribut code et vérifier les valeurs "KeyW", "KeyA", "KeyS" et "KeyD". Cette méthode fonctionne pour tous les claviers et toutes les dispositions, y compris les claviers AZERTY qui inversent la position des touches "w" et "z".
Claviers virtuels
Vous remarquerez que jusqu'à présent, nous nous sommes concentrés sur le comportement en supposant l'utilisation d'un clavier physique. Que faire pour les utilisateurs qui saisissent du texte sur un clavier virtuel ou un autre appareil d'entrée ? La spécification fournit des conseils officiels sur l'attribut code. Pour résumer, un clavier virtuel qui imite la disposition d'un clavier standard devrait entraîner le paramétrage d'un attribut code approprié, mais les claviers virtuels qui adoptent des dispositions non traditionnelles peuvent entraîner le non-paramétrage de code.
Les choses sont plus simples pour l'attribut key, qui devrait être défini sur une chaîne en fonction du caractère que l'utilisateur a (virtuellement) saisi.
Essayer
Gary Kačmarčík a créé une démo fantastique pour visualiser tous les attributs associés aux KeyboardEvent:
Compatibilité entre les navigateurs
À l'heure actuelle, la compatibilité avec l'attribut code est limitée à Chrome 48 et versions ultérieures, Opera 35 et versions ultérieures, et Firefox 44 et versions ultérieures. L'attribut key est compatible avec Firefox 44 et versions ultérieures, Chrome 51 et versions ultérieures, et Opera 38 et versions ultérieures. Il est partiellement compatible avec Internet Explorer 9 et versions ultérieures, et Edge 13 et versions ultérieures.