KeyboardEvent Value (keyCodes, metaKey, etc.) - Astuces CSS

Lorsqu'un se KeyboardEventdéclenche, vous pouvez tester quelle touche a été enfoncée car cet événement contient des informations sur lesquelles vous pouvez écrire une logique.

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

Par exemple, en appuyant sur «a», vous obtiendrez 65. Apparemment, il est préférable d'écrire une logique par rapport à laquelle, car keyCode et charCode sont compliqués:

La propriété event.which normalise event.keyCode et event.charCode. Il est recommandé de regarder l'événement pour la saisie des touches du clavier.

Et:

Dans un événement keypress, la valeur Unicode de la touche enfoncée est stockée dans la propriété keyCode ou charCode, jamais les deux. Si la touche enfoncée génère un caractère (par exemple 'a'), charCode est mis au code de ce caractère, en respectant la casse des lettres. (c'est-à-dire que charCode prend en compte si la touche Maj est maintenue enfoncée). Sinon, le code de la touche enfoncée est stocké dans keyCode.

Outil de testeur

Voir le testeur de Pen event.keyCode par Chris Coyier (@chriscoyier) sur CodePen.

Valeurs du code clé

Voici un tableau qui contient les valeurs de event.which.

Clé	Code
retour arrière	8
languette	9
Entrer	13
décalage	16
ctrl	17
alt	18
pause	19
verrouillage des majuscules	20
s'échapper	27
(espacer)	32
page en haut	33
bas de page	34
finir	35
domicile	36
Flèche gauche	37
flèche vers le haut	38
flèche droite	39
flèche vers le bas	40
insérer	45
effacer	46
0	48
1	49
2	50
3	51
4	52
5	53
6	54
7	55
8	56
9	57
une	65
b	66
c	67
ré	68

Clé	Code
e	69
F	70
g	71
h	72
je	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
touche fenêtre gauche	91
touche de fenêtre droite	92
sélectionner la clé	93
pavé numérique 0	96
pavé numérique 1	97
pavé numérique 2	98
pavé numérique 3	99
pavé numérique 4	100
pavé numérique 5	101
pavé numérique 6	102
pavé numérique 7	103

Clé	Code
pavé numérique 8	104
pavé numérique 9	105
multiplier	106
ajouter	107
soustraire	109
virgule	110
diviser	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
verrouillage numérique	144
verrouillage du défilement	145
point-virgule	186
signe égal	187
virgule	188
tiret	189
point final	190
barre oblique	191
accent grave	192
support ouvert	219
barre oblique inverse	220
fermer le braket	221
simple citation	222

Zell Liew a remarqué que 3 de ces codes clés étaient différents dans Firefox du reste des navigateurs

; est de 59 dans Firefox mais de 186 dans d'autres navigateurs.
= est de 61 dans Firefox mais de 187 dans les autres navigateurs.
- est 173 dans Firefox mais 189 dans les autres navigateurs.

Remarque importante: ces valeurs de code clé ne sont valides que pendant les événements in keydownet keyup. Sur Mac, les keypressévénements vous donnent un ensemble de codes complètement différent.

Par exemple: