枫芸志

【jQuery】增加页面组合快捷键

jQuery是个优雅的框架，可以方便地用js实现页面快捷键的功能，代码很简单

$(document).keypress(function(e){
        if(e.ctrlKey && e.which == 13) { 
                 alert("You clicked Ctrl+Enter");
        } else if (e.shiftKey && e.which==13) {
                alert("You clicked Shift+Enter"); 
       }  else if (e.altKey && e.which==65) {
                alert("You clicked Alt+A"); 
       }      
})





另外，也可以借助jquery.hotkeys插件来完成，快捷键多且需要灵活增删时会比较方便，只是用下来有个问题，配合jQuery 3.4.2的时候按键事件会被重复触发，没去研究如何解决，有兴趣的同学可以和插件作者交流下。

附：键盘键码表

字母和数字键的键码值(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)				功能键键码值(keyCode)
按键	键码	按键	键码	按键	键码	按键	键码
0	96	8	104	F1	112	F7	118
1	97	9	105	F2	113	F8	119
2	98	*	106	F3	114	F9	120
3	99	+	107	F4	115	F10	121
4	100	Enter	108	F5	116	F11	122
5	101	-	109	F6	117	F12	123
6	102	.	110
7	103	/	111

 

控制键键码值(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




本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自枫芸志，原文地址《【jQuery】增加页面组合快捷键》
标签： Javascript • jQuery
分享：