监听键盘事件前端

问题
如何监听键盘复制，粘贴与删除？
实现
监听复制粘贴和删除，兼容windows和mac:

const onKeyDown = (e) => { const { metaKey, ctrlKey, key } = e const isCtrlOrCommand = ctrlKey || metaKey if (isCtrlOrCommand && key.toLocaleLowerCase() === 'c') { console.log('复制') return } if (isCtrlOrCommand && key.toLocaleLowerCase() === 'v') { console.log('粘贴') return } if (['Delete', 'Backspace'].includes(key)) { console.log('删除') return } }

当鼠标聚焦在其他元素上时，不触发键盘事件：

const onKeyDown = (e) => { const { tagName } = document.activeElement || {} if (tagName && tagName.toLocaleUpperCase() !== 'BODY') { return }const { metaKey, ctrlKey, key } = e const isCtrlOrCommand = ctrlKey || metaKey if (isCtrlOrCommand && key.toLocaleLowerCase() === 'c') { console.log('复制') return } if (isCtrlOrCommand && key.toLocaleLowerCase() === 'v') { console.log('粘贴') return } if (['Delete', 'Backspace'].includes(key)) { console.log('删除') return } }

键盘事件有哪些？
监听键盘事件操作有三种：keydown, keypress, keyup。按下键盘触发键盘事件顺序为：keydown -> keypress ->keyup。
keydown
当用户按下键盘上的任意键时触发，会重复触发此事件；
keypress
当用户按下键盘上的字符键时触发，会重复触发此事件；
keyup
当用户释放键盘上的字符键时触发此事件；
区别

keypress: 只能捕捉单个字符，可以捕获单个字符的大小写，不区分小键盘和主键盘的数字字符，不能监听功能键；
keydown/keyup: 可以捕获组合键，不能区分字母的大小写，区分小键盘和主键盘数字字符；

KeyboardEvent
KeyboardEvent 对象描述了用户与键盘的交互。每个对象都描述了用户与键盘（一个按键和修饰键的组合）的单个交互；
常用属性

属性名	类型	描述
altKey	Boolean	当 Windows 上 Alt 键或 Mac 上 Option 或 ? 键被按下，该值为 `true`
metaKey	Boolean	当 Mac 上 Command 键或 Windows 上 ? 键被按下，该值为 `true`
ctrlKey	Boolean	当 Ctrl 键被按下，该值为 `true`
shiftKey	Boolean	当 Shift 键被按下，该值为 `true`
code	String	标识按下的具体是哪个物理键，键盘上每一个按键都对应一个唯一的值。
key	String	指明具体输入的字符内容，如果是非打印字符（例如Enter键、Esc键、Shift键、Alt键等），则返回具体的非打印字符的英文名称，如果输入内容与输入法有关则返回固定的 Process 名称。
keyCode	Number	【过时属性，不推荐使用】此值是跟着键盘走，而不是字符内容。相同按键可能有不同keyCode，相同字符可能有不同keyCode。