KeyboardEvent-Wert (keyCodes, metaKey usw.) - CSS-Tricks

Wenn ein KeyboardEventFeuer ausgelöst wird, können Sie testen, welche Taste gedrückt wurde, da dieses Ereignis Informationen enthält, gegen die Sie Logik schreiben können.

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

Wenn Sie beispielsweise "a" drücken, erhalten Sie 65. Anscheinend ist es am besten, Logik zu schreiben, gegen die keyCode und charCode kompliziert sind:

Die Eigenschaft event.which normalisiert event.keyCode und event.charCode. Es wird empfohlen, event.which für die Tastatureingabe zu beobachten.

Und:

In einem Tastendruckereignis wird der Unicode-Wert der gedrückten Taste entweder in der Eigenschaft keyCode oder charCode gespeichert, niemals in beiden. Wenn die gedrückte Taste ein Zeichen erzeugt (z. B. 'a'), wird charCode unter Berücksichtigung der Groß- und Kleinschreibung auf den Code dieses Zeichens gesetzt. (dh charCode berücksichtigt, ob die Umschalttaste gedrückt gehalten wird). Andernfalls wird der Code der gedrückten Taste in keyCode gespeichert.

Tester-Werkzeug

Siehe den Pen event.keyCode-Tester von Chris Coyier (@chriscoyier) auf CodePen.

Keycode-Werte

Hier ist eine Tabelle, die die Werte von enthält event.which.

Schlüssel	Code
Rücktaste	8
Tab	9
eingeben	13
Verschiebung	16
Strg	17
alt	18
Pause / Pause	19
Caps Lock	20
Flucht	27
(Raum)	32
Seite hoch	33
Bild nach unten	34
Ende	35
Zuhause	36
linker Pfeil	37
Aufwärtspfeil	38
rechter Pfeil	39
Pfeil nach unten	40
einfügen	45
löschen	46
0	48
1	49
2	50
3	51
4	52
5	53
6	54
7	55
8	56
9	57
ein	65
b	66
c	67
d	68

Schlüssel	Code
e	69
f	70
G	71
h	72
ich	73
j	74
k	75
l	76
m	77
n	78
Ö	79
p	80
q	81
r	82
s	83
t	84
u	85
v	86
w	87
x	88
y	89
z	90
linke Fenstertaste	91
rechter Fensterschlüssel	92
Schlüssel auswählen	93
numpad 0	96
Numpad 1	97
Nummernblock 2	98
Nummernblock 3	99
Nummernblock 4	100
Nummernblock 5	101
Nummernblock 6	102
numpad 7	103

Schlüssel	Code
Nummernblock 8	104
Nummernblock 9	105
multiplizieren	106
hinzufügen	107
subtrahieren	109
Komma	110
Teilen	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
Bildlaufsperre	145
Semikolon	186
Gleichheitszeichen	187
Komma	188
Strich	189
Zeitraum	190
Schrägstrich	191
Gravis	192
Klammer öffnen	219
Rückenschnitt	220
Halterung schließen	221
einfaches Anführungszeichen	222

Zell Liew bemerkte, dass 3 dieser Schlüsselcodes in Firefox anders waren als die übrigen Browser

; ist 59 in Firefox, aber 186 in anderen Browsern.
= ist 61 in Firefox, aber 187 in anderen Browsern.
- ist 173 in Firefox, aber 189 in anderen Browsern.

Wichtiger Hinweis: Diese Schlüsselcodewerte sind nur während In- keydownund keyupEvents gültig . Auf dem Mac erhalten Sie durch keypressEreignisse einen völlig anderen Satz von Codes.

Zum Beispiel: