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
.
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
.
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:
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 tastoa
, questo evento si attiverà poiché il tastoa
produce un codice di carattere che è97
. Al contrario, questo evento non si attiverà quando si preme il tastoshift
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:
- Primo, keydown
- Quindi, keypress (con la condizione sopra indicata)
- 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'eventokeypress
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 comeCtrl 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
ekeyup
coprano tutti i tasti e siano ben supportati dalla maggior parte dei browser, ci sono alcune differenze che mettonokeydown
avanti akeyup
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, utilizzandoevent.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
.
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:
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 valoreevent.key
rappresenta la lettera effettiva. - Il valore
event.which
è diverso in Firefox(FF) e altri browser per le chiavi,equal(=)
,semicolon(;)
edash/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
ekeyup
. - 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. Utilizzaevent.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.