Nilai Papan Kekunci (kod kunci, metaKey, dll) - Trik CSS

Isi kandungan

Apabila KeyboardEventberlaku kebakaran, anda boleh menguji kunci mana yang ditekan kerana peristiwa itu mengandungi maklumat yang boleh anda gunakan untuk menulis logik.

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

Contohnya, dengan menekan "a", anda akan mendapat 65. Nampaknya lebih baik menulis logik yang mana, kerana keyCode dan charCode rumit:

Event.which properti menormalkan event.keyCode dan event.charCode. Dianjurkan untuk menonton acara. Yang mana untuk memasukkan kekunci papan kekunci.

Dan:

Dalam peristiwa penekanan kekunci, nilai Unicode dari kekunci yang ditekan disimpan dalam sifat keyCode atau charCode, tidak pernah keduanya. Sekiranya kekunci yang ditekan menghasilkan watak (mis. 'A'), charCode ditetapkan ke kod watak itu, dengan menghormati huruf besar. (iaitu charCode mengambil kira sama ada kekunci shift ditahan). Jika tidak, kod kekunci yang ditekan disimpan dalam keyCode.

Alat Penguji

Lihat penguji event.keyCode Pen oleh Chris Coyier (@chriscoyier) di CodePen.

Nilai kod kunci

Berikut adalah jadual yang mengandungi nilai dari event.which.

Kunci	Kod
ruang belakang	8
tab	9
masuk	13
pergeseran	16
ctrl	17
alt	18
berhenti sebentar	19
Caps Lock	20
melarikan diri	27
(ruang)	32
halaman atas	33
halaman bawah	34
akhir	35
kediaman	36
anak panah kiri	37
anak panah ke atas	38
anak panah kanan	39
anak panah ke bawah	40
masukkan	45
padam	46
0	48
1	49
2	50
3	51
4	52
5	53
6	54
7	55
8	56
9	57
a	65
b	66
c	67
d	68

Kunci	Kod
e	69
f	70
g	71
h	72
i	73
j	74
k	75
l	76
m	77
n	78
o	79
hlm	80
q	81
r	82
s	83
t	84
awak	85
v	86
w	87
x	88
y	89
z	90
kekunci tetingkap kiri	91
kekunci tetingkap kanan	92
pilih kunci	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

Kunci	Kod
numpad 8	104
numpad 9	105
membiak	106
Tambah	107
tolak	109
titik perpuluhan	110
membahagi	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 nombor	144
kunci tatal	145
separuh kolon	186
tanda sama	187
koma	188
sengkang	189
tempoh	190
garis miring ke hadapan	191
loghat kubur	192
kurungan terbuka	219
slash belakang	220
tutup brek	221
petikan tunggal	222

Zell Liew menyedari bahawa 3 daripada kod ini berbeza di Firefox daripada penyemak imbas yang lain

; adalah 59 di Firefox tetapi 186 di penyemak imbas lain.
= adalah 61 di Firefox tetapi 187 di penyemak imbas lain.
- ialah 173 di Firefox tetapi 189 di penyemak imbas lain.

Catatan penting: Nilai kod kunci ini hanya berlaku semasa keydowndan dalam keyupacara. Di Mac, keypressacara memberi anda sekumpulan kod yang sama sekali berbeza.

Sebagai contoh: