Le ultime versioni di Chrome hanno visto due aggiunte ai KeyboardEvent, che vengono utilizzati come parametro passato 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 da ottenere utilizzando gli attributi precedenti.
L'attributo code
Innanzitutto, l'attributo code. Questo valore è impostato su una stringa che rappresenta il tasto premuto per generare il carattere KeyboardEvent, senza tenere conto del layout della tastiera corrente (ad esempio QWERTY rispetto a Dvorak), delle impostazioni internazionali (ad esempio inglese rispetto a francese) o di eventuali tasti di modifica.
Questa opzione è utile quando ti interessa il tasto fisico premuto, anziché il carattere a cui corrisponde. Ad esempio, se stai scrivendo un gioco, potresti volere un determinato insieme di tasti per spostare il giocatore in direzioni diverse e questa mappatura dovrebbe essere idealmente indipendente dal layout della tastiera.
L'attributo chiave
Poi abbiamo il nuovo attributo key. È impostato anche su una stringa, ma mentre code restituisce informazioni sulla chiave fisica premuta, key contiene il carattere generato da quella chiave, tenendo conto del layout della tastiera, delle impostazioni internazionali e dei tasti di modifica correnti.
Esaminare il valore dell'attributo key è utile quando devi sapere quale carattere verrà visualizzato sullo schermo come se l'utente avesse digitato un input di testo.
Cosa significa in pratica?
Per fare un esempio concreto, supponiamo che l'utente utilizzi una tastiera statunitense con layout QWERTY. Se premi il tasto Q fisico sulla tastiera, verrà visualizzato un KeyboardEvent con un attributo code impostato su "KeyQ". Ciò vale indipendentemente dal layout della tastiera e da eventuali altri tasti di modifica. Per fare un paragone, su una tastiera francese (AZERTY) questa chiave avrebbe comunque un code di "KeyQ" anche se la lettera stampata sul tasto è una "a".
La pressione del tasto Q fisico sulla stessa tastiera statunitense genererà in genere un KeyboardEvent con key impostato su "q" (senza tasti di modifica), "Q" (con Maiusc o Bloc Maiusc) o "œ" (su OS X, con Alt). Su una tastiera AZERTY francese, lo stesso tasto genererebbe una "a" (o "A" con Maiusc o Blocco Maiusc). Per altri layout di tastiera, il valore key potrebbe essere "й", "ض", "ㅂ", "た" o un altro carattere.
Tornando all'esempio di gioco precedente, se vuoi che il tuo gioco utilizzi i tasti WASD per i movimenti, puoi utilizzare l'attributo code e controllare la presenza di "KeyW", "KeyA", "KeyS" e "KeyD". Funziona con tutte le tastiere e tutti i layout, anche con le tastiere AZERTY che scambiano la posizione dei tasti "w" e "z".
Tastiere virtuali
Noterai che finora ci siamo concentrati sul comportamento presupponendo una tastiera fisica. Che dire degli utenti che digitano su una tastiera virtuale o un dispositivo di input alternativo? La specifica offre indicazioni ufficiali per l'attributo code. In sintesi, una tastiera virtuale che imita il layout di una tastiera standard dovrebbe comportare l'impostazione di un attributo code appropriato, ma le tastiere virtuali che adottano layout non tradizionali potrebbero comportare l'assenza di code.
Le cose sono più semplici 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 fantastica demo per visualizzare tutti gli attributi associati ai KeyboardEvent:
Supporto su più browser
Al momento della stesura di questo articolo, 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 in 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.