JavaScript：掌握鍵盤事件處理

網站開發人員希望讀者以某種方式與他們的網站互動。訪客可以上下捲動頁面、在輸入欄位中寫入內容、點擊連結造訪另一個頁面，或按組合鍵觸發特定行為。作為開發人員，您應該能夠捕獲所有這些事件並向用戶提供所需的功能。

在本教程中，我們的重點將是在 JavaScript 中處理鍵盤事件。我們將了解不同類型的鍵盤事​​件、處理特殊按鍵事件以及獲取有關按下或釋放的按鍵的資訊。

鍵盤事件類型

鍵盤事件分為三種類型。這些稱為 keydown、keypress 和 keyup。

只要按下某個鍵，就會觸發 keydown 事件。所有鍵都會被觸發。它們是否產生角色價值並不重要。例如，按鍵盤上的 A 或 Alt 鍵將觸發 keydown 事件。

keypress 事件已棄用。它僅在按下產生字元值的鍵時觸發。例如，按 A 鍵將觸發此事件，但按 Alt 鍵則不會。您應該考慮使用 keydown 事件來取代它。

當使用者按下的鍵被釋放時，將觸發 keyup 事件。

假設使用者連續按下鍵盤上的任意鍵。在這種情況下，keydown 事件將會被重複觸發。一旦使用者釋放金鑰，就會觸發 keyup 事件。

監聽鍵盤事件

此時，我想提一些相當明顯的事。鍵盤是一種輸入設備，用於從使用者那裡獲取一些輸入。我們根據該輸入採取行動。但是，用戶還有其他方式發送輸入。

如果您想追蹤使用者在表單中填寫的任何輸入字段，那麼在所述輸入上使用其他事件（例如 change ）更有意義。

此外，鍵盤事件僅為可接收焦點的元素產生。這包括<input> 元素、<textarea></textarea> 元素、<summary></summary># 元素以及具有contentEditable 或tabindex 屬性的其他元素。

例如，除非設定 tabindex 或 contentEditable 屬性，否則您將無法偵聽段落元素上的鍵盤事件。但是，它最終會在 DOM 樹中冒泡，因此您仍然可以將 keydown 或 keyup 事件偵聽器附加到文件。

這是一個例子：

document.addEventListener("keydown", keyIsDown);

function keyIsDown(event) {
    // Do whatever you want!
}

您也可以將回呼作為箭頭函數提供：

document.addEventListener("keydown", (event) => {
    // Do whatever you want!
});

從鍵盤事件取得資訊

在上一節的基本程式碼片段中，我們定義了一個回呼函數。函數接受 event 物件作為其參數。此 event 物件包含您可能需要存取的與 keydown 或 keyup 事件相關的所有資訊。

以下是您應該了解的一些有用屬性：

1. key：此屬性傳回字串，表示所按鍵的字元值。
2. code：此屬性傳回一個字串，表示按下的物理鍵的程式碼。
3. repeat：如果長時間按住某個鍵，屬性將傳回布林值 true，導致 keydown 事件多次觸發。
4. altKey：如果使用者按下Alt 鍵（在Windows 上）或Option 鍵（在在macOS 上）當 keydown 事件觸發時。
5. ctrlKey：如果使用者在keydown 事件觸發時按下Control 鍵，則此屬性傳回布林值true。
6. metaKey：如果使用者在keydown 事件觸發時按下Meta 鍵，則此屬性傳回布林值true。
7. shiftKey：如果使用者在keydown 事件觸發時按下Shift 鍵，則此屬性傳回布林值true。

您會注意到，我在所有最後四個屬性描述中都包含了「當 keydown 事件被觸發時」部分。這意味著，如果在執行上述任一操作時按下A 或3 等鍵，這些屬性的值將為true ，用於 keydown 事件。鍵也處於按下狀態。

專注於以下 CodePen 演示後，嘗試按單一鍵或組合鍵，以查看不同屬性的值變更。

如果您按键盘顶部的 3 键而不按 Shift 键，则 key 属性的值将变为 3 > 并且 code 属性的值变为 Digit3。但是，按下 Shift 后，key 属性的值将变为 #，而 code 属性仍为 Digit3。

您可以尝试使用其他组合键进行相同的操作，您会注意到 key 属性的值会根据您按下的键而变化。但是，code 属性的值保持不变。

键盘上的某些键通常是重复的。例如，有两个 Shift 键。按左键会将 code 的值设置为 ShiftLeft。按右边会将 code 的值设置为 ShiftRight。同样，有两组数字键。字母上方的代码将为您提供 Digit<Number> 代码，而数字键盘上的代码将为您提供 Numpad<Number> 代码。

这意味着，如果您的代码依赖于检测特定键，则务必确保您使用 code 属性来检查按下了哪个键。

我想提的另一件重要的事情是，并不是每个人都使用 QWERTY 键盘，而且他们的键盘甚至可能不是英文的。在这种情况下，使用 key 属性来检查按下了哪个键很容易出错。

响应键盘事件

现在我们知道了如何监听键盘事件并从中提取信息，我们可以编写一些代码来对某些特定键的 keydown 和 keyup 事件做出反应。考虑以下代码片段：

const circle = document.querySelector(".circle");

document.addEventListener("keydown", (event) => {
    
  if (event.code == "KeyR" && event.repeat != true) {
    let rVal = Math.floor(200 + Math.random() * 200);
    circle.setAttribute("style", `width: ${rVal}px; height: ${rVal}px;`);
  }

  if (event.key == "B" && event.shiftKey == true) {
    let rVal = Math.floor(10 + Math.random() * 40);
    circle.setAttribute("style", `border: ${rVal}px solid orangered;`);
  }

  if (event.code == "ArrowUp" && event.repeat != true) {
    circle.classList.add("animate__animated", "animate__bounce");
  }
});

document.addEventListener("keyup", (event) => {
  if (event.code == "ArrowUp") {
    setTimeout(() => {
      circle.classList.remove("animate__animated", "animate__bounce");
    }, 4000);
  }
});

我们为 keydown 事件创建了一个侦听器，并为 keyup 事件创建了另一个侦听器。这两个事件都附加到 document。

在 keydown 内，我们检查三个不同的密钥。我使用了 R 键的 event.code 属性来向您展示您可以单独按 R 键或与任何修饰键组合使用，并且它仍会将圆的半径更改为随机值。另一方面，我们使用 event.key 属性来检查其值是否为 B。仅当您同时按 Shift 和 B 时，此块中的代码才会执行​​，因为这种组合会导致 event.key 属性成为大写“B”。

在 keyup 内，我们检查 ArrowUp 键上的 keyup 事件。一旦钥匙被解除，我们会在四秒的延迟后删除之前附加的类。

以下 CodePen 演示展示了这一切的实际效果：

您应该尝试在上述代码中添加自己的逻辑，以便当用户按下A、S、W键时圆圈会移动> 和D。

最终想法

在本教程中，我们学习了 JavaScript 中键盘事件的基础知识。按下并释放键盘上的按键将分别触发 keydown 和 keyup 事件。与这些事件关联的 event 对象包含您确定按下了哪个键并采取适当操作所需的所有信息。

请记住，键盘只是众多可能的输入设备之一。因此，使用键盘检测任何输入可能并不总是能达到预期效果。在这种情况下，您应该考虑使用与输入相关的事件。

以上是JavaScript：掌握鍵盤事件處理的詳細內容。更多資訊請關注PHP中文網其他相關文章！