Giá trị KeyboardEvent (keyCodes, metaKey, v.v.) - Thủ thuật CSS

Khi KeyboardEventxảy ra hỏa hoạn, bạn có thể kiểm tra phím nào đã được nhấn vì sự kiện đó chứa thông tin mà bạn có thể viết logic chống lại.

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

Ví dụ: bằng cách nhấn “a”, bạn sẽ nhận được 65. Rõ ràng tốt nhất là viết logic dựa vào đó, vì Mã khóa và Mã biểu tượng rất phức tạp:

Thuộc tính event.which chuẩn hóa event.keyCode và event.charCode. Bạn nên xem event.which để nhập phím bàn phím.

Và:

Trong một sự kiện nhấn phím, giá trị Unicode của phím được nhấn được lưu trữ trong thuộc tính keyCode hoặc charCode, không bao giờ cả hai. Nếu phím được nhấn tạo ra một ký tự (ví dụ: 'a'), thì Mã ký tự được đặt thành mã của ký tự đó, tương ứng với kiểu chữ cái. (nghĩa là charCode sẽ tính đến việc phím shift có được giữ hay không). Nếu không, mã của phím đã nhấn được lưu trong Mã khóa.

Công cụ kiểm tra

Xem trình kiểm tra Pen event.keyCode của Chris Coyier (@chriscoyier) trên CodePen.

Giá trị mã khóa

Đây là một bảng chứa các giá trị từ event.which.

Chìa khóa	Mã
xóa lùi	số 8
chuyển hướng	9
đi vào	13
sự thay đổi	16
ctrl	17
alt	18
nghỉ tạm dừng	19
phím Caps Lock	20
bỏ trốn	27
(không gian)	32
trang lên	33
trang dưới	34
kết thúc	35
Trang Chủ	36
mũi tên trái	37
mũi tên lên	38
mũi tên bên phải	39
mũi tên xuống	40
chèn	45
xóa bỏ	46
0	48
1	49
2	50
3	51
4	52
5	53
6	54
7	55
số 8	56
9	57
a	65
b	66
c	67
d	68

Chìa khóa	Mã
e	69
f	70
g	71
h	72
Tôi	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
phím cửa sổ bên trái	91
phím cửa sổ bên phải	92
chọn phím	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

Chìa khóa	Mã
numpad 8	104
numpad 9	105
nhân	106
thêm vào	107
trừ đi	109
dấu thập phân	110
chia	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
khóa num	144
khóa cuộn	145
dấu chấm phẩy	186
dấu bằng	187
dấu phẩy	188
gạch ngang	189
giai đoạn = Stage	190
dấu gạch chéo	191
dấu huyền	192
mở ngoặc	219
dấu gạch chéo	220
đóng braket	221
trích dẫn duy nhất	222

Zell Liew nhận thấy rằng 3 trong số các mã khóa này trong Firefox khác với các trình duyệt còn lại

; là 59 trong Firefox nhưng 186 trong các trình duyệt khác.
= là 61 trong Firefox nhưng 187 trong các trình duyệt khác.
- là 173 trong Firefox nhưng 189 trong các trình duyệt khác.

Lưu ý quan trọng: Các giá trị mã khóa này chỉ có giá trị trong các sự kiện keydownvà trong keyup. Trên Mac, keypresscác sự kiện cung cấp cho bạn một bộ mã hoàn toàn khác.

Ví dụ: