js 和 jQuery 监听键盘快捷键

这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战

在网站中经过监听用户敲下的快捷键来执行指定的指令，从而提升生产的效率，好比：编写推文是经过快捷键快速实现文字加粗，改变字体大小，又或者在线做图时快速裁剪等等的操做。

键盘事件 KeyboardEvent()

KeyboardEvent 对象描述了用户与键盘的交互。 每一个事件都描述了用户与一个按键（或一个按键和修饰键的组合）的单个交互；事件类型keydown， keypress 与 keyup 用于识别不一样的键盘活动类型。

window.onload = function() {
    document.addEventListener("keydown", (event) => {
        console.log(event)
    }, false)
}
复制代码

上面是按下 f 键返回的参数

属性

altKey：alt 键被按下，返回 true；
ctrlKey：ctrl 键被按下，返回 true；
key：返回键的键值，好比：f 键、a 键；
shiftKey：shift 键被按下，返回 true；
keyCode：键码值，Netscape/Firefox/Opera中不支持，不推荐使用；
which：shift 也是键码值，不推荐使用；

方法

keydown：键被按下时触发的事件；
keyup：键被释放（抬起）时触发的事件；

Keycode对照表（键码对照表）

字母和数字键的键码值(keyCode)

按键	键码	按键	键码	按键	键码	按键	键码
A	65	J	74	S	83	1	49
B	66	K	75	T	84	2	50
C	67	L	76	U	85	3	51
D	68	M	77	V	86	4	52
E	69	N	78	W	87	5	53
F	70	O	79	X	88	6	54
G	71	P	80	Y	89	7	55
H	72	Q	81	Z	90	8	56
I	73	R	82	0	48	9	57

数字键盘上的键的键码值(keyCode)

按键	键码	按键	键码
0	96	8	104
1	97	9	105
2	98	*	106
3	99	+	107
4	100	Enter	108
5	101	-	109
6	102	.	110
7	103	/	111

功能键键码值(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

控制键键码值(keyCode)

按键	键码	按键	键码	按键	键码	按键	键码
BackSpace	8	Esc	27	Right Arrow	39	-_	189
Tab	9	Spacebar	32	Dw Arrow	40	.>	190
Clear	12	Page Up	33	Insert	45	/?	191
Enter	13	Page Down	34	Delete	46	`~	192
Shift	16	End	35	Num Lock	144	[{	219
Control	17	Home	36	;:	186	|	220
Alt	18	Left Arrow	37	=+	187	]}	221
Cape Lock	20	Up Arrow	38	,<	188	'"	222

多媒体键码值(keyCode)

按键	键码
音量加	175
音量减	174
中止	179
静音	173
浏览器	172
邮件	180
搜索	170
收藏	171

js 监听键盘事件

js 能够使用 document.addEventListener 监听各类事件

// js
window.onload = function() {
    document.addEventListener("keydown", (event) => {
        const keyname = event.key.toLocaleLowerCase();
        if (event.ctrlKey && keyname === 'c') {
            alert(`ctrl + ${keyname}`)
        } else if (event.ctrlKey && event.altKey && keyname === 'd') {
            alert(`ctrl + alt + ${keyname}`)
        }
    }, false)
}
复制代码

上面的代码就是当键盘按下 ctrl + c 或者 ctrl + alt + d 都会执行相应的操做

jQuery 的写法跟 js 的相似，也有 keydown 和 keyup 事件

// jQuery
$(function() {
   $(document).keydown(function (event) {
        const keyname = event.key.toLocaleLowerCase();
        if (event.ctrlKey && keyname === 'b') {
            alert(`ctrl + ${keyname}`)
        } else if (event.ctrlKey && event.altKey && keyname === 'x') {
            alert(`ctrl + alt + ${keyname}`)
        }
   }) 
})
复制代码

上面的代码也是当键盘按下 ctrl + b 或者 ctrl + alt + x 执行相应的操做

文中涉及到的资料

• 键盘事件 KeyboardEvent()

（求关注）

欢迎关注个人公众号：A纲 Coder，得到平常干货推送。最后再次感谢您的阅读，我是程序猿憨憨