文章目录
一、前言
最近在开发的过程中,有个需求需要给按钮增加快捷键的功能,但是对每个按钮对应的keycode不是太清楚,这就是该文章的来历了。
二、给页面添加按钮监控事件
通过onkeydown给页面添加一个监听按键按下的事件。代码如下所示:
document.onkeydown = function(e){
e = e || window.event;
}
三、按键对应的keycode
3.1 字母键和数字键对应的keycode
如下所示:
按键 | 键码 | 按键 | 键码 | 按键 | 键码 |
---|---|---|---|---|---|
A | 65 | N | 78 | 0 | 48 |
B | 66 | O | 79 | 1 | 49 |
C | 67 | P | 80 | 2 | 50 |
D | 68 | Q | 81 | 3 | 51 |
E | 69 | R | 82 | 4 | 52 |
F | 70 | S | 83 | 5 | 53 |
G | 71 | T | 84 | 6 | 54 |
H | 72 | U | 85 | 7 | 55 |
I | 73 | V | 86 | 8 | 56 |
J | 74 | W | 87 | 9 | 57 |
K | 75 | X | 88 | ||
L | 76 | Y | 89 | ||
M | 77 | Z | 90 |
3.2 数字键盘上的键对应的keycode
废话不说,直接看下边的内容:
按键 | 键码 | 按键 | 键码 |
---|---|---|---|
0 | 96 | 9 | 105 |
1 | 97 | * | 106 |
2 | 98 | + | 107 |
3 | 99 | Enter | 108 |
4 | 100 | - | 109 |
5 | 101 | . | 110 |
6 | 102 | / | 111 |
7 | 103 | ||
8 | 104 |
3.3 功能键对应的keycode
按键 | 键码 | 按键 | 键码 |
---|---|---|---|
F1 | 112 | F7 | 118 |
F2 | 113 | F8 | 119 |
F3 | 114 | F9 | 120 |
F4 | 115 | F10 | 121 |
F5 | 116 | F11 | 122 |
F6 | 117 | F12 | 123 |
3.4 控制键对应的keycode
按键 | 键码 | 按键 | 键码 | 按键 | 键码 |
---|---|---|---|---|---|
BackSpace | 8 | Page Down | 34 | =+ | 187 |
Tab | 9 | End | 35 | ,< | 188 |
Clear | 12 | Home | 36 | -_ | 189 |
Enter | 13 | Left Arrow | 37 | .> | 190 |
Shift | 16 | Up Arrow | 38 | /? | 191 |
Control | 17 | Right Arrow | 39 | `~ | 192 |
Alt | 18 | Dw Arrow | 40 | [{ | 219 |
Cape Lock | 20 | Insert | 45 | | | 220 |
Esc | 27 | Delete | 46 | ]} | 221 |
Spacebar | 32 | Num Lock | 144 | '" | 222 |
Page Up | 33 | ;: | 186 |
四、结语
道阻且长,行则将至,行而不辍,未来可期,加油。
原创不易,如果你觉得文章不错,对你的进步有那么一点帮助,那么就给个小心心,如果觉得文章非常对你的胃口,那么欢迎你关注我,或者关注个人的微信公众号 程序猿每日分享,这里有资源,有内推,有和你志同道合的朋友,咱们一起打怪升级。