监听键盘事件

问题

如何监听键盘复制,粘贴与删除?

实现

监听复制粘贴和删除,兼容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为:
监听键盘事件_第1张图片

mac 按 f 键的 KeyboardEvent为:

监听键盘事件_第2张图片

你可能感兴趣的