共计 1559 个字符，预计需要花费 4 分钟才能阅读完成。
问题
如何监听键盘复制，粘贴与删除？
实现
监听复制粘贴和删除，兼容 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。 |
mac 按 command 键的 KeyboardEvent 为：
mac 按 f 键的 KeyboardEvent 为：
正文完
