在 JavaScript 中,探索與鍵盤事件的基礎互動。

在與鍵盤事件互動時,有3種類型的事件:

  • 「keydown」鍵盤按鍵已按下。
  • 「keyup」鍵盤按鍵已釋放。

當鍵盤按鍵保持按下並且重複時,也會觸發「keydown」事件。

雖然通常會在特定元素上監聽滑鼠和觸控事件,但在文件上監聽鍵盤事件很常見:

document.addEventListener('keydown', event => {
 // 按下按鍵
})

傳遞給事件監聽器的參數是KeyboardEvent

此事件物件除了事件物件屬性外,還提供了其他一些獨有的屬性:

  • altKey:如果事件觸發時按下了 Alt 鍵,則為 true。
  • code:按下的按鍵的代碼,以字串形式返回。
  • ctrlKey:如果事件觸發時按下了 Ctrl 鍵,則為 true。
  • key:按下的按鍵的值,以字串形式返回。
  • locale:鍵盤區域化值。
  • location:按鍵在鍵盤上的位置
  • metaKey:如果事件觸發時按下了 Meta 鍵(例如 Command 鍵),則為 true。
  • repeat:如果該按鍵已重複(例如該按鍵尚未釋放),則為 true。
  • shiftKey:如果事件觸發時按下了 Shift 鍵,則為 true。

這個示例是一個按鍵記錄器,它會顯示我列出的部分屬性的值:

查看Key logger demo(@flaviocopes)在CodePen上的示例。