一，快捷键json对象
key映射code
export const KEY_CODE = {
Backspace: 8,
Tab: 9,
Enter: 13,
Shift: 16,
Ctrl: 17,
Alt: 18,
Pause_Break: 19,
Caps_Lock: 20,
Esc: 27,
Space: 32,
Page_Up: 33,
Page_Down: 34,
End: 35,
Home: 36,
Left_Arrow: 37,
Up_Arrow: 38,
Right_Arrow: 39,
Down_Arrow: 40,
Insert: 45,
Delete: 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,
E: 69,
F: 70,
G: 71,
H: 72,
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,
Left_Windows: 91,
Right_Windows: 92,
Select: 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,
Numpad_8: 104,
Numpad_9: 105,
Multiply: 106,
Add: 107,
Subtract: 109,
Decimal_Point: 110,
Divide: 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,
Scroll_Lock: 145,
Semicolon: 186,
Equal_Sign: 187,
Comma: 188,
Dash: 189,
Period: 190,
Forward_Slash: 191,
Grave_Accent: 192,
Open_Bracket: 219,
Backslash: 220,
Close_Bracket: 221,
Single_Quote: 222,
};
code映射key
const CODE_KEY = {
8: 'Backspace',
9: 'Tab',
13: 'Enter',
16: 'Shift',
17: 'Ctrl',
18: 'Alt',
19: 'Pause/Break',
20: 'Caps Lock',
27: 'Esc',
32: 'Space',
33: 'Page Up',
34: 'Page Down',
35: 'End',
36: 'Home',
37: 'Left Arrow',
38: 'Up Arrow',
39: 'Right Arrow',
40: 'Down Arrow',
45: 'Insert',
46: 'Delete',
48: '0',
49: '1',
50: '2',
51: '3',
52: '4',
53: '5',
54: '6',
55: '7',
56: '8',
57: '9',
65: 'A',
66: 'B',
67: 'C',
68: 'D',
69: 'E',
70: 'F',
71: 'G',
72: 'H',
73: 'I',
74: 'J',
75: 'K',
76: 'L',
77: 'M',
78: 'N',
79: 'O',
80: 'P',
81: 'Q',
82: 'R',
83: 'S',
84: 'T',
85: 'U',
86: 'V',
87: 'W',
88: 'X',
89: 'Y',
90: 'Z',
91: 'Left Windows',
92: 'Right Windows',
93: 'Select',
96: 'Numpad 0',
97: 'Numpad 1',
98: 'Numpad 2',
99: 'Numpad 3',
100: 'Numpad 4',
101: 'Numpad 5',
102: 'Numpad 6',
103: 'Numpad 7',
104: 'Numpad 8',
105: 'Numpad 9',
106: 'Multiply',
107: 'Add',
109: 'Subtract',
110: 'Decimal Point',
111: 'Divide',
112: 'F1',
113: 'F2',
114: 'F3',
115: 'F4',
116: 'F5',
117: 'F6',
118: 'F7',
119: 'F8',
120: 'F9',
121: 'F10',
122: 'F11',
123: 'F12',
144: 'Num Lock',
145: 'Scroll Lock',
186: 'Semicolon',
187: 'Equal Sign',
188: 'Comma',
189: 'Dash',
190: 'Period',
191: 'Forward Slash',
192: 'Grave Accent',
219: 'Open Bracket',
220: 'Backslash',
221: 'Close Bracket',
222: 'Single Quote',
}
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keycode Example</title>
</head>
<body>
<h1>Press any key to see its keycode and key name</h1>
<p id="output"></p>
<script>
const output = document.getElementById("output");
document.addEventListener("keydown", function (e) {
const { ctrlKey, shiftKey, altKey, keyCode } = e;
output.innerText = keyCode;
});
</script>
</body>
</html>
PS:学会了记得，点赞，评论，收藏，分享
