KeyboardEvent-waarde (keyCodes, metaKey, enz.) - CSS-trucs

Wanneer een KeyboardEventvuurt, kunt u testen welke toets is ingedrukt, omdat die gebeurtenis informatie bevat waartegen u logica kunt schrijven.

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

Als u bijvoorbeeld op "a" drukt, krijgt u 65. Blijkbaar is het het beste om logica te schrijven waartegen, aangezien keyCode en charCode gecompliceerd zijn:

De eigenschap event.which normaliseert event.keyCode en event.charCode. Het wordt aanbevolen om de gebeurtenis te bekijken die voor invoer van de toetsenbordtoets is.

En:

In een toetsdrukgebeurtenis wordt de Unicode-waarde van de ingedrukte toets opgeslagen in de eigenschap keyCode of charCode, nooit in beide. Als de ingedrukte toets een teken genereert (bijv. 'A'), wordt charCode ingesteld op de code van dat teken, rekening houdend met het hoofdlettergebruik. (dwz charCode houdt er rekening mee of de shift-toets ingedrukt wordt gehouden). Anders wordt de code van de ingedrukte toets opgeslagen in keyCode.

Tester Tool

Zie de Pen-event.keyCode-tester door Chris Coyier (@chriscoyier) op CodePen.

Keycode-waarden

Hier is een tabel met de waarden van event.which.

Sleutel	Code
backspace	8
tabblad	9
invoeren	13
verschuiving	16
ctrl	17
alt	18
pauze	19
Caps Lock	20
ontsnappen	27
(ruimte)	32
pagina omhoog	33
pagina omlaag	34
einde	35
huis	36
linker pijl	37
pijltje omhoog	38
rechter pijl	39
pijl omlaag	40
invoegen	45
verwijderen	46
0	48
1	49
2	50
3	51
4	52
5	53
6	54
7	55
8	56
9	57
een	65
b	66
c	67
d	68

Sleutel	Code
e	69
f	70
g	71
h	72
ik	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
linker raamtoets	91
rechter raamtoets	92
selecteer sleutel	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

Sleutel	Code
numpad 8	104
numpad 9	105
vermenigvuldigen	106
toevoegen	107
aftrekken	109
decimale punt	110
verdelen	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
scroll Lock	145
puntkomma	186
gelijk teken	187
komma	188
streepje	189
periode	190
schuine streep naar voren	191
ernstig accent	192
open beugel	219
schuine streep naar achteren	220
sluit beugel	221
alleenstaande citaat	222

Zell Liew merkte op dat 3 van deze sleutelcodes in Firefox anders waren dan in de rest van de browsers

; is 59 in Firefox maar 186 in andere browsers.
= is 61 in Firefox maar 187 in andere browsers.
- is 173 in Firefox maar 189 in andere browsers.

Belangrijke opmerking: deze keycode-waarden zijn alleen geldig tijdens in keydownen keyupevents. Op Mac keypressgeven gebeurtenissen je een heel andere set codes.

Bijvoorbeeld: