Nilai KeyboardEvent (keyCodes, metaKey, dll) - Trik CSS

Saat KeyboardEventaktif, Anda dapat menguji tombol mana yang ditekan karena peristiwa tersebut berisi informasi yang dapat Anda tulis logikanya.

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

Misalnya, dengan menekan "a", Anda akan mendapatkan 65. Tampaknya yang terbaik adalah menulis logika yang dengannya, karena keyCode dan charCode itu rumit:

Properti event.which menormalkan event.keyCode dan event.charCode. Dianjurkan untuk menonton acara yang untuk input tombol keyboard.

Dan:

Saat tombol ditekan, nilai Unicode dari tombol yang ditekan disimpan di properti keyCode atau charCode, tidak pernah keduanya. Jika tombol yang ditekan menghasilkan karakter (misalnya 'a'), charCode disetel ke kode karakter itu, dengan memperhatikan huruf besar / kecil. (yaitu charCode memperhitungkan apakah tombol shift ditekan). Jika tidak, kode dari tombol yang ditekan disimpan dalam keyCode.

Alat Penguji

Lihat Penguji event.keyCode Pena oleh Chris Coyier (@chriscoyier) di CodePen.

Nilai kode kunci

Berikut tabel yang berisi nilai-nilai dari event.which.

Kunci	Kode
menghapus	8
tab	9
memasukkan	13
bergeser	16
ctrl	17
alt	18
jeda istirahat	19
kunci huruf kapital	20
melarikan diri	27
(ruang)	32
naik halaman	33
halaman bawah	34
akhir	35
rumah	36
panah kiri	37
panah atas	38
panah kanan	39
panah bawah	40
memasukkan	45
menghapus	46
0	48
1	49
2	50
3	51
4	52
5	53
6	54
7	55
8	56
9	57
Sebuah	65
b	66
c	67
d	68

Kunci	Kode
e	69
f	70
g	71
h	72
saya	73
j	74
k	75
l	76
m	77
n	78
Hai	79
p	80
q	81
r	82
s	83
t	84
u	85
v	86
w	87
x	88
y	89
z	90
kunci jendela kiri	91
kunci jendela kanan	92
pilih kunci	93
angka 0	96
angka 1	97
numpad 2	98
papan angka 3	99
papan angka 4	100
papan angka 5	101
papan angka 6	102
angka 7	103

Kunci	Kode
angka 8	104
angka 9	105
berkembang biak	106
Menambahkan	107
mengurangi	109
koma desimal	110
membagi	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
kunci num	144
kunci gulir	145
titik koma	186
tanda yang sama	187
koma	188
berlari	189
Titik	190
garis miring ke depan	191
aksen berat	192
braket terbuka	219
garis miring ke belakang	220
tutup braket	221
kutipan tunggal	222

Zell Liew memperhatikan bahwa 3 dari kode kunci ini berbeda di Firefox dari pada browser lainnya

; adalah 59 di Firefox tetapi 186 di browser lain.
= adalah 61 di Firefox tetapi 187 di browser lain.
- adalah 173 di Firefox tetapi 189 di browser lain.

Catatan penting: Nilai kode kunci ini hanya berlaku selama dalam keydowndan keyupacara. Di Mac, keypressacara memberi Anda sekumpulan kode yang sangat berbeda.

Sebagai contoh: