監聽鍵盤事件

時傾發表於2021-11-19
事件

問題

如何監聽鍵盤複製，貼上與刪除？

實現

監聽複製貼上和刪除，相容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 物件描述了使用者與鍵盤的互動。每個物件都描述了使用者與鍵盤（一個按鍵和修飾鍵的組合）的單個互動；

常用屬性

屬性名型別描述
altKeyBoolean當 Windows 上 Alt 鍵 或 Mac 上 Option 或 ⌥ 鍵被按下，該值為 true
metaKeyBoolean當 Mac 上 Command 鍵 或 Windows 上 ⊞ 鍵被按下，該值為 true
ctrlKeyBoolean當 Ctrl 鍵被按下，該值為 true
shiftKeyBoolean當 Shift 鍵被按下，該值為 true
codeString標識按下的具體是哪個物理鍵，鍵盤上每一個按鍵都對應一個唯一的值。
keyString指明具體輸入的字元內容，如果是非列印字元（例如Enter鍵、Esc鍵、Shift鍵、Alt鍵等），則返回具體的非列印字元的英文名稱，如果輸入內容與輸入法有關則返回固定的 Process 名稱。
keyCodeNumber【過時屬性，不推薦使用】此值是跟著鍵盤走，而不是字元內容。相同按鍵可能有不同keyCode，相同字元可能有不同keyCode。

mac 按 command 鍵的 KeyboardEvent為：
image-20211119143453915.png

mac 按 f 鍵的 KeyboardEvent為：

image-20211119143633595.png

相關文章