问题

如何监听键盘复制，粘贴与删除？

实现

监听复制粘贴和删除，兼容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 对象描述了用户与键盘的交互。每个对象都描述了用户与键盘（一个按键和修饰键的组合）的单个交互；

常用属性

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/10828