Website developers want readers to interact with their website in some way. Visitors can scroll up and down the page, write in input fields, click a link to access another page, or press key combinations to trigger specific actions. As a developer, you should be able to capture all these events and provide the required functionality to the user.

In this tutorial, our focus will be on handling keyboard events in JavaScript. We'll learn about the different types of keyboard events, handling special key events, and getting information about keys that are pressed or released.

Keyboard event type

Keyboard events are divided into three types. These are called keydown, keypress, and keyup.

As long as a key is pressed, the keydown event will be triggered. All keys will be triggered. It doesn't matter whether they generate character value. For example, pressing the A or Alt key on the keyboard will trigger the keydown event.

keypress event is deprecated. It only fires when the key that produces the character value is pressed. For example, pressing the A key will trigger this event, but pressing the Alt key will not. You should consider using the keydown event instead.

When the key pressed by the user is released, the keyup event will be triggered.

Suppose the user presses any key on the keyboard continuously. In this case, the keydown event will be triggered repeatedly. Once the user releases the key, the keyup event is triggered.

Listen to keyboard events

At this point, I want to mention something fairly obvious. A keyboard is an input device used to get some input from the user. We take action based on that input. However, there are other ways for users to send input.

If you want to track any input fields that the user fills out in a form, it makes more sense to use other events on said inputs (such as change ).

Additionally, keyboard events are generated only for elements that can receive focus. This includes <input> elements, <textarea></textarea> elements, <summary></summary> elements, and elements with contentEditable or tabindex Other elements of attributes.

For example, you cannot listen to keyboard events on a paragraph element unless you set the tabindex or contentEditable properties. However, it will eventually bubble up in the DOM tree, so you can still attach a keydown or keyup event listener to the document.

This is an example:

document.addEventListener("keydown", keyIsDown);

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

You can also provide the callback as an arrow function:

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

Get information from keyboard events

In the basic code snippet of the previous section, we defined a callback function. This function accepts an event object as its argument. This event object contains all the information you might need to access related to the keydown or keyup event.

Here are some useful properties you should know about:

1. key: This property returns a string representing the character value of the key pressed.
2. code: This property returns a string representing the code of the physical key pressed.
3. repeat: If a key is pressed for a long time, this property will return a Boolean value true, causing the keydown event to be triggered multiple times.
4. altKey: If the user presses the Alt key (on Windows) or the Option key (on macOS) when When the keydown event is triggered.
5. ctrlKey: If the user presses the Control key when the keydown event fires, this property returns a Boolean value true.
6. metaKey: If the user presses the Meta key when the keydown event fires, this property returns a Boolean value true.
7. shiftKey: If the user presses the Shift key when the keydown event fires, this property returns a Boolean value true.

You'll notice that I've included the "when the keydown event is fired" part in all the last four property descriptions. This means that if a key such as A or 3 is pressed while performing any of the above actions, the value of these properties will be true for keydown event. The key is also pressed.

After focusing on the following CodePen demo, try pressing individual keys or key combinations to see the values ??of different properties change.

如果您按鍵盤頂部的 3 鍵而不按 Shift 鍵，則 key 屬性的值將變?yōu)?3 > 并且 code 屬性的值變?yōu)?Digit3。但是，按下 Shift 后，key 屬性的值將變?yōu)?#，而 code 屬性仍為 Digit3。

您可以嘗試使用其他組合鍵進(jìn)行相同的操作，您會注意到 key 屬性的值會根據(jù)您按下的鍵而變化。但是，code 屬性的值保持不變。

鍵盤上的某些鍵通常是重復(fù)的。例如，有兩個 Shift 鍵。按左鍵會將 code 的值設(shè)置為 ShiftLeft。按右邊會將 code 的值設(shè)置為 ShiftRight。同樣，有兩組數(shù)字鍵。字母上方的代碼將為您提供 Digit<Number> 代碼，而數(shù)字鍵盤上的代碼將為您提供 Numpad<Number> 代碼。

這意味著，如果您的代碼依賴于檢測特定鍵，則務(wù)必確保您使用 code 屬性來檢查按下了哪個鍵。

我想提的另一件重要的事情是，并不是每個人都使用 QWERTY 鍵盤，而且他們的鍵盤甚至可能不是英文的。在這種情況下，使用 key 屬性來檢查按下了哪個鍵很容易出錯。

響應(yīng)鍵盤事件

現(xiàn)在我們知道了如何監(jiān)聽鍵盤事件并從中提取信息，我們可以編寫一些代碼來對某些特定鍵的 keydown 和 keyup 事件做出反應(yīng)?？紤]以下代碼片段：

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);
  }
});

我們?yōu)?keydown 事件創(chuàng)建了一個偵聽器，并為 keyup 事件創(chuàng)建了另一個偵聽器。這兩個事件都附加到 document。

在 keydown 內(nèi)，我們檢查三個不同的密鑰。我使用了 R 鍵的 event.code 屬性來向您展示您可以單獨(dú)按 R 鍵或與任何修飾鍵組合使用，并且它仍會將圓的半徑更改為隨機(jī)值。另一方面，我們使用 event.key 屬性來檢查其值是否為 B。僅當(dāng)您同時按 Shift 和 B 時，此塊中的代碼才會執(zhí)行??，因?yàn)檫@種組合會導(dǎo)致 event.key 屬性成為大寫“B”。

在 keyup 內(nèi)，我們檢查 ArrowUp 鍵上的 keyup 事件。一旦鑰匙被解除，我們會在四秒的延遲后刪除之前附加的類。

以下 CodePen 演示展示了這一切的實(shí)際效果：

您應(yīng)該嘗試在上述代碼中添加自己的邏輯，以便當(dāng)用戶按下A、S、W鍵時圓圈會移動> 和D。

最終想法

在本教程中，我們學(xué)習(xí)了 JavaScript 中鍵盤事件的基礎(chǔ)知識。按下并釋放鍵盤上的按鍵將分別觸發(fā) keydown 和 keyup 事件。與這些事件關(guān)聯(lián)的 event 對象包含您確定按下了哪個鍵并采取適當(dāng)操作所需的所有信息。

請記住，鍵盤只是眾多可能的輸入設(shè)備之一。因此，使用鍵盤檢測任何輸入可能并不總是能達(dá)到預(yù)期效果。在這種情況下，您應(yīng)該考慮使用與輸入相關(guān)的事件。

The above is the detailed content of JavaScript: Mastering Keyboard Event Handling. For more information, please follow other related articles on the PHP Chinese website!