Les précédentes versions de Chrome ont constaté deux ajouts aux KeyboardEvents, qui sont utilisés en tant que paramètre transmis aux écouteurs d'événements keydown, keypress et keyup. Les attributs code (ajoutés dans Chrome 48) et key (ajoutés dans Chrome 51) permettent aux développeurs d'obtenir facilement des informations qui seraient autrement difficiles à l'aide d'anciens attributs.
Attribut code
Commençons par l'attribut code. Il est défini sur une chaîne représentant la touche sur laquelle l'utilisateur a appuyé pour générer la KeyboardEvent, sans tenir compte de la disposition actuelle du clavier (par exemple, QWERTY au lieu de Dvorak), des paramètres régionaux (par exemple, anglais ou français) ni de toutes les touches de modification.
Cette option est utile lorsque vous vous souciez de la touche physique sur laquelle vous avez appuyé, plutôt que du caractère correspondant. Par exemple, si vous écrivez un jeu, vous pouvez utiliser un ensemble de touches pour déplacer le joueur dans différentes directions. Dans l'idéal, cette correspondance doit être indépendante de la disposition du clavier.
L'attribut de clé
Vient ensuite le nouvel attribut key. Il est également défini sur une chaîne, mais tandis que code renvoie des informations sur la touche physique sur laquelle vous avez appuyé, key contient le caractère généré par cette touche, en tenant compte de la disposition actuelle du clavier, des paramètres régionaux et des touches de modification.
Examiner la valeur de l'attribut key s'avère pratique lorsque vous avez besoin de savoir quel caractère s'afficherait à l'écran comme si l'utilisateur avait saisi du texte.
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 de clavier QWERTY. Si vous appuyez sur la touche physique Q de ce clavier, vous obtiendrez une KeyboardEvent 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 possède toujours un code de "KeyQ", même si la lettre imprimée sur l'en-tête de touche est un "a".
Lorsque vous appuyez sur la touche physique Q d'un même clavier américain, vous générez généralement une KeyboardEvent avec key défini sur "q" (sans touche de modification), "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 Verr Maj). Pour les autres dispositions de clavier, la valeur key peut être "й", "ض", "ㅂ", "た" ou un autre caractère.
Reprenons l'exemple de jeu précédent : si vous souhaitez que votre jeu utilise les touches WASD pour les déplacements, vous pouvez utiliser l'attribut code et rechercher "KeyW", "KeyA", "KeyS" et "KeyD". Cela fonctionne avec tous les claviers et configurations, y compris les claviers AZERTY qui permutent la position des touches "w" et "z".
Claviers virtuels
Vous avez remarqué que jusqu'à présent, nous nous sommes concentrés sur le comportement qui s'appliquait à un clavier physique. Qu'en est-il des utilisateurs qui tapent sur un clavier virtuel ou sur un autre périphérique d'entrée ? La spécification fournit des recommandations officielles pour l'attribut code. En résumé, un clavier virtuel imitant la disposition d'un clavier standard doit entraîner la définition d'un attribut code approprié. Toutefois, avec les claviers virtuels qui adoptent des dispositions non traditionnelles, il est possible que code ne soit pas défini du tout.
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 saisi (virtuellement).
Essayer
Gary Kačmarčík a mis en place une démonstration fantastique pour visualiser tous les attributs associés aux éléments KeyboardEvent:
Compatibilité multinavigateur
À l'heure où nous écrivons ces lignes, la compatibilité de l'attribut code est limitée à Chrome 48, Opera 35 et Firefox 44 ou version ultérieure.
L'attribut key est compatible avec Firefox 44 ou version ultérieure, Chrome 51 et Opera 38, avec une compatibilité partielle avec Internet Explorer 9 et Edge 13 et versions ultérieures.