/

鍵盤事件

鍵盤事件

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

在與鍵盤事件互動時，有3種類型的事件：

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

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

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

1
2
3
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上的示例。