KeyboardEvent Value (keyCodes, metaKey, ecc.) - Trucchi CSS

Anonim

Quando si verifica un KeyboardEventincendio, puoi verificare quale tasto è stato premuto perché quell'evento contiene informazioni su cui puoi scrivere logica.

document.addEventListener("keydown", function(event) ( console.log(event.which); ))

Ad esempio, premendo "a", otterrai 65. Apparentemente è meglio scrivere logica rispetto alla quale, poiché keyCode e charCode sono complicati:

La proprietà event.which normalizza event.keyCode e event.charCode. Si consiglia di guardare event.which per l'inserimento dei tasti della tastiera.

E:

In un evento keypress, il valore Unicode del tasto premuto viene memorizzato nella proprietà keyCode o charCode, mai in entrambe. Se il tasto premuto genera un carattere (es. 'A'), charCode viene impostato sul codice di quel carattere, rispettando le maiuscole. (cioè charCode tiene conto se il tasto shift è tenuto premuto). In caso contrario, il codice del tasto premuto viene memorizzato in keyCode.

Strumento Tester

Vedi il tester Pen event.keyCode di Chris Coyier (@chriscoyier) su CodePen.

Valori del codice chiave

Ecco una tabella che contiene i valori da event.which.

Chiave Codice
backspace 8
tab 9
accedere 13
cambio 16
ctrl 17
alt 18
pausa / pausa 19
blocco maiuscole 20
fuga 27
(spazio) 32
pagina su 33
pagina giù 34
fine 35
casa 36
freccia sinistra 37
freccia in alto 38
freccia destra 39
Freccia in giù 40
inserire 45
Elimina 46
0 48
1 49
2 50
3 51
4 52
5 53
6 54
7 55
8 56
9 57
un 65
b 66
c 67
d 68
Chiave Codice
e 69
f 70
g 71
h 72
io 73
j 74
K 75
l 76
m 77
n 78
o 79
p 80
q 81
r 82
S 83
t 84
u 85
v 86
w 87
X 88
y 89
z 90
tasto sinistro della finestra 91
tasto della finestra destra 92
tasto di selezione 93
tastierino numerico 0 96
tastierino numerico 1 97
tastierino numerico 2 98
tastierino numerico 3 99
tastierino numerico 4 100
tastierino numerico 5 101
tastierino numerico 6 102
tastierino numerico 7 103
Chiave Codice
tastierino numerico 8 104
tastierino numerico 9 105
moltiplicare 106
Inserisci 107
sottrarre 109
punto decimale 110
dividere 111
f1 112
f2 113
f3 114
f4 115
f5 116
f6 117
f7 118
f8 119
f9 120
f10 121
f11 122
f12 123
bloc num 144
blocco scorrimento 145
punto e virgola 186
uguale 187
virgola 188
trattino 189
periodo 190
barra 191
accento grave 192
parentesi aperta 219
barra posteriore 220
chiudere braket 221
virgoletta singola 222

Zell Liew ha notato che 3 di questi codici chiave erano diversi in Firefox rispetto al resto dei browser

  • ; è 59 in Firefox ma 186 in altri browser.
  • = è 61 in Firefox ma 187 in altri browser.
  • - è 173 in Firefox ma 189 in altri browser.

Nota importante: questi valori del codice chiave sono validi solo durante gli eventi in keydowned keyup. Su Mac, gli keypresseventi ti danno una serie di codici completamente diversa.

Per esempio:

Chiave event.which in keydown event.which in pressione dei tasti
un 65 97
b 66 98
c 67 99