Articolo originale: https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/

Gli eventi della tastiera in JavaScript ti aiutano a catturare le interazioni dell'utente con la tastiera.

Come molti altri eventi in JavaScript, l'interfaccia KeyboardEvent fornisce tutte le proprietà e i metodi necessari per gestire ogni sequenza di tasti eseguita da un utente sulla tastiera.

Sono stati scritti molti articoli su come funzionano e su come usarli. Allo stesso tempo, W3.org continua ad aggiornare le specifiche introducendo nuove proprietà, deprecando quelle esistenti e contrassegnando determinati codici come legacy.

Per questo motivo, è essenziale che gli sviluppatori Web continuino a studiare l'interfaccia KeyboardEvent per sapere esattamente cosa si può usare e cosa non è più rilevante.

In questo articolo impareremo:

  • L'interfaccia KeyboardEvent.
  • I tipi di eventi della tastiera su cui dobbiamo concentrarci.
  • I tipi di eventi della tastiera di cui potremmo non aver mai bisogno.
  • Di quali proprietà hai bisogno in pratica e come le gestiscono i diversi browser.
  • Cosa è deprecato e cosa è in uso.
  • Un parco giochi per provare le cose mentre impariamo.
  • Infine, l'attuale elenco di codici chiave come riferimento e uso futuro.

Spero sia di tuo gradimento.

L'interfaccia KeyboardEvent e i tipi di evento

L'interfaccia KeyboardEvent fornisce informazioni utilizzando costanti predefinite, proprietà e un unico metodo (a partire da gennaio 2021). Estende l'interfaccia UIEvent che a sua volta estende l'interfaccia Event.

keyboardevent_gerarchy
Gerarchia degli eventi della tastiera

Esistono principalmente tre tipi di eventi della tastiera, keydown, keypress e, keyup. Possiamo ottenere informazioni contestuali su questi eventi dalle proprietà e dai metodi dell'interfaccia KeyboardEvent.

È possibile aggiungere ciascuno di questi tipi di evento a un elemento o un oggetto HTML document utilizzando il metodo addEventListener. Ecco un esempio di ascolto di un evento keydown su un elemento il cui ID è "type-here":

let elem = document.getElementById('type-here');

elem.addEventListener("keydown", function (event) {
    // L'evento del parametro è di tipo KeyboardEvent
  	addRow(event);
});

In alternativa, con l'elemento puoi utilizzare i metodi dell'handler come, onKeydown(event), onKeyup(event), onKeypress(event)  per gestire gli eventi della tastiera. Ecco un esempio di gestione di un evento keyup su un elemento di input:

<input type="text" id="type-here" onKeyup="doSomething(event)">

Se stampi l'oggetto event nella console del browser, vedrai tutte le sue proprietà e i metodi insieme a quelli che eredita dalle interfacce UIEvent e Event.

info_evento
Ho premuto il tasto, amentre gestivo l' keyupevento

Prova questo parco giochi interattivo per eventi con la tastiera

Prima di andare oltre, che ne dici di un playground per esplorare tutti gli eventi della tastiera, le loro proprietà, le loro caratteristiche e così via? Penso che sarà fantastico usarlo insieme a questo articolo e anche dopo.

Metti il ​​cursore in un punto qualsiasi dell'app incorporata di seguito e digita un tasto qualsiasi per visualizzare le informazioni contestuali a riguardo.

Puoi anche filtrare gli eventi che desideri deselezionando le caselle di controllo in alto. Quindi provalo:

Il parco giochi degli eventi della tastiera
Se hai problemi ad accedere al playground sopra, puoi accedere a questo strumento direttamente da qui: https://keyevents.netlify.app/

E puoi trovare il codice sorgente della demo qui: https://github.com/atapas/js-keyevents-demo

keydown, keypress, keyup - quale dovresti usare?

Gli eventi della tastiera sono:

  • keydown: Si attiva quando viene premuto un tasto qualsiasi.
  • keypress: Si attiva solo quando viene premuto un tasto che produce un codice di carattere. Ad esempio, se si preme il tasto a, questo evento si attiverà poiché il tasto a produce un codice di carattere che è 97. Al contrario, questo evento non si attiverà quando si preme il tasto shift in quanto non produce alcun codice di carattere.
  • keyup: Si attiva quando viene rilasciato un tasto qualsiasi.

Se tutti e tre gli eventi sono collegati a un elemento DOM, l'ordine di attivazione sarebbe:

  1. Primo, keydown
  2. Quindi, keypress (con la condizione sopra indicata)
  3. Ultimo, keyup

Tra questi eventi, l'evento Keyboard più utilizzato è (o dovrebbe essere) keydown perché:

  • L'evento keydown ha la massima copertura di tasti per produrre le informazioni contestuali. L'evento keypress funziona solo per un sottoinsieme di tasti. Non è possibile acquisire  gli eventi  dai tasti Alt, Ctrl, Shift, Meta e altri con keypress . Ciò significa anche che non possiamo attivare l'evento keypress con combinazioni di tasti come Ctrl Z, Shift Tab e così via.
  • Inoltre, l'evento keypress è stato deprecato. Questo è un motivo abbastanza importante per non usarlo.
  • Sebbene entrambi gli eventi keydown e keyup coprano tutti i tasti e siano ben supportati dalla maggior parte dei browser, ci sono alcune differenze che mettono keydown avanti a keyup in ordine di importanza. L'evento keydown si attiva prima che il browser elabori il tasto, mentre l'evento keyup si attiva dopo che il browser elabora il tasto. Se annulli un evento keydown (ad esempio, utilizzando event.preventDefault()), anche l'azione del browser verrà annullata. In caso di evento keyup, l'azione del browser non verrà annullata anche dopo aver annullato l'evento.

Nell'esempio seguente, stiamo usando event.preventDefault() quando un evento keydown o keyup viene attivato. L'azione del Bowser di scrivere i caratteri dei tasti nella casella di testo non verrà eseguita nel caso di keydown ma continuerà ad avvenire per keyup.

keydowncontrokeyup

Con tutte queste spiegazioni, l'evento keydown è un chiaro vincitore e dovrebbe diventare il tipo di evento per i tasti più popolare (usato).

Come utilizzare in pratica le proprietà KeyboardEvent

Questa è la domanda da un miliardo di dollari! La risposta più breve è, dipende. Ma da cosa? Dipende da:

  • Il supporto del browser per la tua applicazione
  • Quanto è legacy il codice della tua applicazione e quanto sei disposto al refactoring?

Ma prima di arrivarci, vediamo un'anteprima di alcune delle proprietà e dei metodi più utili dell'interfaccia KeyboardEvent.

Proprietà/Metodo Descrizione Deprecato/Obsoleto
altKey Restituisce un valore boleano (true/false). Il valore è true quando il tasto Alt è premuto. No
ctrlKey Restituisce un valore boleano (true/false). TIl valore è true quando il tasto Ctrl è premuto. No
shiftKey Restituisce un valore boleano (true/false). Il valore è true quando il tasto Shift è premuto. No
metaKey Restituisce un valore boleano (true/false). Il valore è true quando uno qualsiasi del tasti Meta è premuto. No
code Valore del codice del tasto fisico. No
key Il valore effettivo del tasto premuto. No
metodo getModifierState() Restituisce un valore booleano (true/false). Il valore true indica lo stato on di tasti quali CapsLock, NumLock, Alt, Control, Shift, Meta, ecc. No
charCode Restituisce il valore Unicode. Questo è stato deprecato e dovremmo invece usare la proprietà key. Yes
keyCode Restituisce il codice numerico del valore premuto. uesto è deprecato e dovremmo invece usare la prorpietà key. Yes
which Restituisce il codice numerico del valore premuto. uesto è deprecato e dovremmo invece usare la prorpietà key. Yes

Le ultime tre proprietà sono obsolete e dovresti invece usare la proprietà key. La proprietà key dispone del più ampio supporto per il browser .

È supportata su:

  • Microsoft Edge: versione >= 79
  • Firefox: versione >= 29
  • Google Chrome: versione >= 51
  • Safari: versione >= 10.1

Quindi, finché non utilizzi nessuna delle precedenti versioni dei browser, la proprietà event.key dovrebbe essere sufficiente per identificare un tasto. Nel caso in cui dovessi supportare un browser più vecchio, una migliore alternativa sarebbe la proprietà event.which.

window.addEventListener("keydown", function (event) {
  
  if (event.key !== undefined) {
    // Gestisci l'evento con KeyboardEvent.key
  } else if (event.which !== undefined) {
    // Gestisci l'evento con KeyboardEvent.which
  }
});

Se il tuo codice utilizza una delle proprietà deprecate e hai l'opportunità di rifattorizzare quel codice, è sempre meglio farlo.

Tasti modificatori

I tasti modificatori sono i tasti speciali sulla tastiera che modificano il comportamento predefinito degli altri tasti. Ctrl, Shift, e Alt sono alcuni tasti modificatori. Quando un tasto modificatore viene combinato con un altro tasto, è possibile che si verifichi un'azione diversa.

Ad esempio, se si preme il tasto z, dovrebbe restituire il tasto e il codice per la lettera z. Se lo combini con il modificatore Control e premi Control z, probabilmente otterrai un'operazione Undo (Annulla). Vediamolo con qualche altro esempio nella prossima sezione.

Le proprietà, event.altKey, event.ctrlKey, event.shiftKey e così via consentono di rilevare se è stato premuto un tasto modificatore.

Combinazioni di tasti

Possiamo combinare più tasti ed eseguire azioni in base a queste combinazioni di tasti. Il frammento di codice seguente mostra come combinare il tasto Ctrl e z per definire un'azione:

document
  .getElementById("to_focus")
  .addEventListener("keydown", function(event) {
    if (event.ctrlKey && event.key === "z") {
      // Fai qualcosa, potrebbe essere un'operazione 'Undo'
    }
});

Ecco un altro esempio che mostra alcune altre combinazioni di tasti. Per favore, provalo:

Prova le combinazioni di tasti

Un elenco completo dei valori degli eventi tasti

La tabella seguente mostra un elenco di tasti con i valori event.which, event.key e event.code.

NOME DEL TASTO EVENT.WHICH EVENT.KEY EVENT.CODE NOTE
backspace 8 Backspace Backspace
tab 9 Tab Tab
invio 13 Enter Enter
maiusc(sinistro) 16 Shift ShiftLeft event.shiftKey è true
maiusc(destro) 16 Shift ShiftRight event.shiftKey è true
ctrl(sinistro) 17 Control ControlLeft event.ctrlKey è true
ctrl(destro) 17 Control ControlRight event.ctrlKey è true
alt(sinistro) 18 Alt AltLeft event.altKey è true
alt(destro) 18 Alt AltRight event.altKey è true
pausa/interr 19 Pause Pause
bloc maiusc 20 CapsLock CapsLock
Esc 27 Escape Escape
barra spaziatrice 32 Space Il valore di event.key è un singolo spazio.
PGSU 33 PageUp PageUp
PGGIù 34 PageDown PageDown
fine 35 End End
home 36 Home Home
freccia sinistra 37 ArrowLeft ArrowLeft
freccia su 38 ArrowUp ArrowUp
freccia destra 39 ArrowRight ArrowRight
freccia giù 40 ArrowDown ArrowDown
Stamp 44 PrintScreen PrintScreen
ins 45 Insert Insert
canc 46 Delete Delete
0 48 0 Digit0
1 49 1 Digit1
2 50 2 Digit2
3 51 3 Digit3
4 52 4 Digit4
5 53 5 Digit5
6 54 6 Digit6
7 55 7 Digit7
8 56 8 Digit8
9 57 9 Digit9
a 65 a KeyA
b 66 b KeyB
c 67 c KeyC
d 68 d KeyD
e 69 e KeyE
f 70 f KeyF
g 71 g KeyG
h 72 h KeyH
i 73 i KeyI
j 74 j KeyJ
k 75 k KeyK
l 76 l KeyL
m 77 m KeyM
n 78 n KeyN
o 79 o KeyO
p 80 p KeyP
q 81 q KeyQ
r 82 r KeyR
s 83 s KeyS
t 84 t KeyT
u 85 u KeyU
v 86 v KeyV
w 87 w KeyW
x 88 x KeyX
y 89 y KeyY
z 90 z KeyZ
tasto window sinistro 91 Meta MetaLeft event.metaKey è true
tasto window destro 92 Meta MetaRight event.metaKey is true
select key (Context Menu) 93 ContextMenu ContextMenu
numpad 0 96 0 Numpad0
numpad 1 97 1 Numpad1
numpad 2 98 2 Numpad2
numpad 3 99 3 Numpad3
numpad 4 100 4 Numpad4
numpad 5 101 5 Numpad5
numpad 6 102 6 Numpad6
numpad 7 103 7 Numpad7
numpad 8 104 8 Numpad8
numpad 9 105 9 Numpad9
moltiplicazione 106 * NumpadMultiply
più 107 + NumpadAdd
meno 109 - NumpadSubtract
punto decimale 110 . NumpadDecimal
diviso 111 / NumpadDivide
f1 112 F1 F1
f2 113 F2 F2
f3 114 F3 F3
f4 115 F4 F4
f5 116 F5 F5
f6 117 F6 F6
f7 118 F7 F7
f8 119 F8 F8
f9 120 F9 F9
f10 121 F10 F10
f11 122 F11 F11
f12 123 F12 F12
bloc num 144 NumLock NumLock
bloc scorr 145 ScrollLock ScrollLock
audio volume muto 173 AudioVolumeMute ⚠️ event.which ha valore 181 in Firefox. FF provvede il valore code come VolumeMute
audio volume giù 174 AudioVolumeDown ⚠️ event.which ha valore 182 in Firefox. FF provvede il valore code come VolumeDown
audio volume su 175 AudioVolumeUp ⚠️ event.which ha valore 183 in Firefox. FF provvede il valore code come VolumeUp
media player 181 LaunchMediaPlayer ⚠️ event.which ha valore 0 (nessun valore) in Firefox. FF provvede il valore code come MediaSelect
lancia applicazione 1 182 LaunchApplication1 ⚠️event.which ha valore 0 (nessun valore) in Firefox. FF provvede il valore code come LaunchApp1
lancia applicazione 2 183 LaunchApplication2 ⚠️ event.which ha valore 0 (nessun valore) in Firefox. FF provvede il valore code come LaunchApp2
punto e virgola 186 ; Semicolon ⚠️ event.which ha valore 59 in Firefox
segno uguale 187 = Equal ⚠️ event.which ha valore 61 in Firefox
virgola 188 , Comma
trattino 189 - Minus ⚠️ event.which ha valore 173 in Firefox
punto 190 . Period
barra retroversa 191 / Slash
accento grave 192 ` Backquote
aperta parentesi quadra 219 [ BracketLeft
barra 220 \ Backslash
chiusa parentesi quadra 221 ] BracketRight
apostrofo 222 ' Quote


Notare che:

  • event.which è stato deprecato (o obsoleto)
  • Il valore event.code è lo stesso per le lettere minuscole (a) e le lettere maiuscole (A). Tuttavia il valore event.key rappresenta la lettera effettiva.
  • Il valore event.which è diverso in Firefox(FF) e altri browser per le chiavi, equal(=), semicolon(;) e dash/minus(-)

Che ne dici della tastiera virtuale?

Che dire quindi delle tastiere virtuali, come l'utilizzo sui nostri telefoni cellulari o tablet o qualsiasi altro dispositivo di input?

La specifica dice che se la tastiera virtuale ha un layout dei tasti e funzionalità simili a una tastiera standard, deve risultare in un attributo di codice appropriato. In caso contrario, non restituirà il valore corretto.

In sintesi

Riassumendo:

  • È possibile utilizzare KeyboardEvent per acquisire le interazioni dell'utente utilizzando una tastiera.
  • Ci sono principalmente tre eventi tasto, keydown, keypress e keyup.
  • Dovremmo usare il tipo di evento keydown il più possibile poiché soddisfa la maggior parte dei casi d'uso.
  • Il tipo di evento keypress  è stato deprecato.
  • La proprietà event.which è stata deprecata. Utilizza event.key ove possibile.
  • Se devi supportare un browser meno recente, utilizza il fallback appropriato per il rilevamento dei tasti.
  • Possiamo combinare più tasti ed eseguire operazioni.
  • La tastiera virtuale supporta questi eventi purché il layout e le funzioni siano simili alla tastiera standard.

È tutto per ora. Grazie per aver letto fin qui! Rimaniamo sintonizzati. Puoi contattarmi su Twitter (@tapasadhikary) con commenti o sentiti libero di seguirmi.

tipo di chiave
Da https://giphy.com/