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，得到平常乾貨推送。最後再次感謝您的閱讀，我是程序猿憨憨