本文主要是介绍监听键盘按下和弹起事件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<div class="center-container" id="ed-editor-container" tabindex="0"></div>
tabindex="0" 让div可获得聚焦
// 编辑器区域键盘事件监听
this.edEditorContainer = document.getElementById('ed-editor-container')
this.edEditorContainer.removeEventListener('keyup', this.handleKeyUpEvent)
this.edEditorContainer.addEventListener('keyup', this.handleKeyUpEvent)
// 可按需手动聚焦
// this.edEditorContainer.focus()
// 监听键盘事件
handleKeyUpEvent(e) {
// console.log(e)
if (e.key === 'Delete' || e.key === 'Backspace') {
// console.log('移除')
} else if (e.key === 'c' && e.ctrlKey) {
// console.log('复制')
} else if (e.key === 'v' && e.ctrlKey) {
// console.log('粘贴')
} else if (e.key === 'z' && e.ctrlKey) {
// console.log('撤销')
} else if (e.key === 'y' && e.ctrlKey) {
// console.log('恢复')
}
}
// 对于mac系统的键盘监听，特别是需要监听Command+Key 的组合键，由于按住Command键后无法监听到别的键弹起事件，因此监听键盘按下事件，但需注意的时，长按会持续触发按下事件，如长按Command+v就会持续触发粘贴事件
this.isMacSystem = navigator.userAgentData.platform.indexOf('mac') > -1
this.edEditorContainer.removeEventListener('keydown', this.handleKeyDownEvent)
this.edEditorContainer.addEventListener('keydown', this.handleKeyDownEvent)
handleKeyDownEvent(e) {
// console.log(e)
if (e.key === 'Delete' || e.key === 'Backspace') {
// console.log('移除')
} else if (e.key === 'c' && e.metaKey) {
// console.log('复制')
} else if (e.key === 'v' && e.metaKey) {
// console.log('粘贴')
} else if (e.key === 'z' && e.metaKey) {
// console.log('撤销')
} else if (e.key === 'y' && e.metaKey) {
// console.log('恢复')
}
}
体验参考：简单设计EasyDesign-免费在线设计工具图片处理工具简单设计是一款专业强大的在线设计工具，图片处理工具，包含海报设计、封面图片设计，LOGO设计、图片压缩、图片裁剪、图片格式转换等功能，是一款良心好用的设计神器。
https://jiandan.link/app/poster?index=0&com=auto
这篇关于监听键盘按下和弹起事件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
