KeyboardEvent Value (keyCodes, metaKey, etc) - CSS-triks

Når en KeyboardEventfyrer, kan du teste hvilken tast som ble trykket på fordi hendelsen inneholder informasjon du kan skrive logikk mot.

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

For eksempel, ved å trykke “a”, får du 65. Det er tilsynelatende best å skrive logikk som keyCode og charCode er kompliserte mot:

Event.which-egenskapen normaliserer event.keyCode og event.charCode. Det anbefales å se event.which for tastaturinngang.

Og:

I en tastetrykkshendelse lagres Unicode-verdien til tasten som trykkes ned i enten keyCode- eller charCode-egenskapen, aldri begge deler. Hvis tasten du trykker på genererer et tegn (f.eks. 'A'), blir charCode satt til koden til det tegnet, med respekt for bokstavsaken. (dvs. charCode tar hensyn til om skiftnøkkelen holdes nede). Ellers lagres koden til den trykkte tasten i keyCode.

Testverktøy

Se Pen event.keyCode tester av Chris Coyier (@chriscoyier) på CodePen.

Nøkkelkodeverdier

Her er en tabell som inneholder verdiene fra event.which.

Nøkkel	Kode
baksiden	8
kategorien	9
Tast inn	1. 3
skifte	16
ctrl	17
alt	18
pause	19
cap lock	20
flukt	27
(rom)	32
side opp	33
bla ned	34
slutt	35
hjem	36
venstre pil	37
pil opp	38
høyre pil	39
pil ned	40
sett inn	45
slett	46
0	48
1	49
2	50
3	51
4	52
5	53
6	54
7	55
8	56
9	57
en	65
b	66
c	67
d	68

Nøkkel	Kode
e	69
f	70
g	71
h	72
Jeg	73
j	74
k	75
l	76
m	77
n	78
o	79
s	80
q	81
r	82
s	83
t	84
u	85
v	86
w	87
x	88
y	89
z	90
venstre vinduetast	91
høyre vinduetast	92
velg tast	93
numpad 0	96
Numpad 1	97
numpad 2	98
numpad 3	99
numpad 4	100
numpad 5	101
numpad 6	102
numpad 7	103

Nøkkel	Kode
numpad 8	104
numpad 9	105
multiplisere	106
Legg til	107
trekke fra	109
desimal tegn	110
dele opp	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
num lock	144
rullelås	145
semikolon	186
likhetstegn	187
komma	188
bindestrek	189
periode	190
skråstrek fremover	191
alvorlig aksent	192
åpen brakett	219
skråstrek	220
lukk braket	221
enkelt tilbud	222

Zell Liew la merke til at 3 av disse nøkkelkodene var forskjellige i Firefox enn resten av nettleserne

; er 59 i Firefox, men 186 i andre nettlesere.
= er 61 i Firefox, men 187 i andre nettlesere.
- er 173 i Firefox, men 189 i andre nettlesere.

Viktig merknad: Disse nøkkelkodeverdiene er bare gyldige under inn- keydownog keyuphendelser. På Mac gir keypresshendelser deg et helt annet sett med koder.

For eksempel: