Keycode键盘事件键名

2024-09-28 23:52:33首发，1周前更新

键盘相关事件所获得键值，通过event.code来判断，监听ctrl、shift、alt等组合键

前言

桌面端的键盘事件有三个：keydown、keyup和keypress，由于keypress事件已经被标准弃用，所以我们目前主要使用的键盘事件是keydown和keyup。

在使用键盘事件的时候通常需要知道按下了哪个键，在这三个键盘事件中可通过event.key和event.code这两个属性获得键值。

获得键值的方法，在js标准中推荐使用event.code属性，event.code表达键值的方式更完整更有可读性。

事件属性

键盘事件的属性除了event.key和event.code，还有event.which(键位的数字代码)、event.altKey、event.ctrlKey、event.shiftKey和metaKey，其中经常使用的属性是：event.code、event.altKey、event.ctrlKey和event.shiftKey。

通过event.code判断是哪个键，通过event.altKey、event.ctrlKey和event.shiftKey判断是否按下了快捷键。

常用键值

以下列举了键值对照表。

键名	event.which(弃用)	event.key(弃用)	event.code	备注
backspace	8	Backspace	Backspace
tab	9	Tab	Tab
enter	13	Enter	Enter
shift(left)	16	Shift	ShiftLeft	`event.shiftKey` 为 `true`
shift(right)	16	Shift	ShiftRight	`event.shiftKey` 为 `true`
ctrl(left)	17	Control	ControlLeft	`event.ctrlKey` 为 `true`
ctrl(right)	17	Control	ControlRight	`event.ctrlKey` 为 `true`
alt(left)	18	Alt	AltLeft	`event.altKey` 为 `true`
alt(right)	18	Alt	AltRight	`event.altKey` 为 `true`
pause/break	19	Pause	Pause
caps lock	20	CapsLock	CapsLock
escape	27	Escape	Escape
space	32		Space	`event.key` 的值是一个空格
page up	33	PageUp	PageUp
page down	34	PageDown	PageDown
end	35	End	End
home	36	Home	Home
left arrow	37	ArrowLeft	ArrowLeft
up arrow	38	ArrowUp	ArrowUp
right arrow	39	ArrowRight	ArrowRight
down arrow	40	ArrowDown	ArrowDown
print screen	44	PrintScreen	PrintScreen
insert	45	Insert	Insert
delete	46	Delete	Delete
0-9	48-57	0-9	Digit0-Digit9	按下上侧数字键盘
a-z	65-90	a-z	KeyA-KeyZ
left window key	91	Meta	MetaLeft	`event.metaKey` 为 `true`
right window key	92	Meta	MetaRight	`event.metaKey` 为 `true`
select key (Context Menu)	93	ContextMenu	ContextMenu
numpad 0-9	96-105	0-9	Numpad0-Numpad9	按下右侧数字键盘
multiply	106	*	NumpadMultiply
add	107	+	NumpadAdd
subtract	109	-	NumpadSubtract
decimal point	110	.	NumpadDecimal
divide	111	/	NumpadDivide
f1-f12	112-123	F1-F12	F1-F12
num lock	144	NumLock	NumLock
scroll lock	145	ScrollLock	ScrollLock
semi-colon	186	;	Semicolon	`event.which` 的值在 Firefox 中是 59
equal sign	187	=	Equal	`event.which` 的值在 Firefox 中是 61
comma	188	,	Comma
dash	189	-	Minus	`event.which` 的值在 Firefox 中是 173
period	190	.	Period
forward slash	191	/	Slash
Backquote/Grave accent	192	`	Backquote
open bracket	219	[	BracketLeft
back slash	220	\	Backslash
close bracket	221	]	BracketRight
single quote	222	'	Quote

简单测试

由于键盘事件是绑定在window对象上的，所以适合使用addEventListener和removeEventListener方法进行事件委托。当不再监听键盘事件应该即时解除。

经实测，截图按键PRTSC不能获取。

输出
HTML
JS

```
                
                
            
```

                
                    let ev = (e)=>{
                        e.preventDefault();
                        console.log(e.which,e.key,e.code);
                    }
                    bind01.onclick= ()=>{
                        document.addEventListener('keydown',ev,{ passive: false });
                    }
                    cancel01.onclick= ()=>{
                        document.removeEventListener('keydown',ev);
                    }

组合键

一个键位比较好处理，当遇上组合键时（比如ctrl+c）应该如何处理呢？需要搭配使用event.ctrlKey、event.shiftKey、event.altKey和event.metaKey属性，这几个属性均为boolean类型，比如当按下ctrl键则event.ctrlKey=true，其他相同。

经实测，不能识别meta键和其他键的组合键。

输出
HTML
JS

尝试按下组合键：ctrl+c(复制)、ctrl+v(粘贴)
```
                
                
            
```

                
                    let ev = (e)=>{
                        e.preventDefault();
                        if (e.ctrlKey && e.code === 'KeyC') {
                            console.log('Ctrl + C 被按下，复制成功！');
                        }
                        if (e.ctrlKey && e.code === 'KeyV') {
                            console.log('Ctrl + V 被按下，粘贴成功！');
                        }
                    }
                    bind02.onclick= ()=>{
                        document.addEventListener('keydown',ev,{ passive: false });
                    }
                    cancel02.onclick= ()=>{
                        document.removeEventListener('keydown',ev);
                    }