监听键盘按下和弹起事件

<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