Nelle ultime versioni di Chrome sono state aggiunte due aggiunte agli elementi KeyboardEvent, che vengono utilizzati come parametro trasmesso ai listener di eventi keydown, keypress e keyup. Sia l'attributo code (aggiunto in Chrome 48) sia l'attributo key (aggiunto in Chrome 51) offrono agli sviluppatori un modo semplice per ottenere informazioni che altrimenti sarebbero difficili utilizzando gli attributi precedenti.
L'attributo del codice
Il primo è l'attributo code. È impostato su una stringa che rappresenta il tasto premuto per generare il KeyboardEvent, senza tenere conto del layout della tastiera corrente (ad esempio QWERTY rispetto a Dvorak), delle impostazioni internazionali (ad esempio inglese e francese) o di eventuali tasti di modifica.
Ciò è utile quando ti interessa il tasto fisico che è stato premuto, anziché il carattere a cui corrisponde. Ad esempio, se stai scrivendo un gioco, potresti volere un determinato set di tasti per spostare il player in direzioni diverse; l'associazione dovrebbe essere indipendente dal layout della tastiera.
L'attributo chiave
Poi abbiamo il nuovo attributo key. È anche impostato su una stringa, ma anche se code restituisce informazioni sul tasto fisico che è stato premuto, key contiene il carattere generato da quel tasto, tenendo conto del layout di tastiera, delle impostazioni internazionali e dei tasti di modifica correnti.
Controllare il valore dell'attributo key è utile quando devi sapere quale carattere verrà visualizzato sullo schermo come se l'utente avesse digitato un testo.
Cosa significa nella pratica?
Per fare un esempio concreto, supponiamo che l'utente utilizzi una tastiera americana con layout tastiera QWERTY. Se premi il tasto fisico Q sulla tastiera, verrà generato un KeyboardEvent con un attributo code impostato su "KeyQ". Questo vale indipendentemente dal layout della tastiera e dagli altri tasti di modifica. Per fare un confronto, su una tastiera francese (AZERTY) questo tasto avrebbe comunque code di "KeyQ", anche se la lettera stampata sul tasto è una "a".
Se premi il tasto fisico Q sulla stessa tastiera americana, in genere viene generato un KeyboardEvent con key impostato su "q" (senza tasti di modifica), "Q" (con Maiusc o Bloc Maiusc) o "œ" (su OS X, con Alt). In una tastiera AZERTY francese, questo stesso tasto genera una "a" (o "A" con Maiusc o Bloc Maiusc). Per altri layout di tastiera, il valore di key potrebbe essere "й", "ض", "ㅂ", "た" o qualche altro carattere.
Ritornando all'esempio del gioco precedente, se vuoi che il tuo gioco utilizzi i tasti WASD per i movimenti, puoi usare l'attributo code e controllare "KeyW", "KeyA", "KeyS" e "KeyD". Questo approccio funziona per tutte le tastiere e tutti i layout, anche per le tastiere AZERTY che invertono la posizione dei tasti "w" e "z".
Tastiere virtuali
Noterai che fino a questo momento ci siamo concentrati sul comportamento che prevede l'uso di una tastiera fisica. E gli utenti che digitano su una tastiera virtuale o un dispositivo di input alternativo? La specifica offre indicazioni ufficiali per l'attributo code. Per riassumere, una tastiera virtuale che riproduce il layout di una tastiera standard dovrebbe generare un attributo code appropriato, ma le tastiere virtuali che adottano layout non tradizionali potrebbero comportare la mancata impostazione di code.
Le cose sono più chiare per l'attributo key, che dovrebbe essere impostato su una stringa in base al carattere digitato (virtualmente) dall'utente.
Prova
Gary Kačmarčík ha realizzato una demo fantastica per visualizzare tutti gli attributi associati agli attributi KeyboardEvent:
Supporto cross-browser
Al momento della stesura del presente documento, il supporto dell'attributo code è limitato a Chrome 48 e versioni successive, Opera 35 e versioni successive e Firefox 44 e versioni successive.
L'attributo key è supportato su Firefox 44 e versioni successive, Chrome 51 e versioni successive e Opera 38 e versioni successive, con supporto parziale in Internet Explorer 9 e versioni successive ed Edge 13 e versioni successive.