JavaScript:掌握鍵盤事件處理

JavaScript:掌握鍵盤事件處理

網站開發人員希望讀者以某種方式與他們的網站進行交互。訪問者可以上下滾動頁面、在輸入字段中寫入內容、單擊鏈接訪問另一個頁面,或者按組合鍵觸發特定行為。作為開發人員,您應該能夠捕獲所有這些事件并向用戶提供所需的功能。

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

鍵盤事件類型

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

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

立即學習Java免費學習筆記(深入)”;

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

當用戶按下的鍵被釋放時,將觸發 keyup 事件。

假設用戶連續按下鍵盤上的任意鍵。在這種情況下,keydown 事件將被重復觸發。一旦用戶釋放密鑰,就會觸發 keyup 事件。

監聽鍵盤事件

此時,我想提一些相當明顯的事情。鍵盤是一種輸入設備,用于從用戶那里獲取一些輸入。我們根據該輸入采取行動。但是,用戶還有其他方式發送輸入。

如果您想跟蹤用戶在表單中填寫的任何輸入字段,那么在所述輸入上使用其他事件(例如 change )更有意義。

此外,鍵盤事件僅為可以接收焦點的元素生成。這包括 元素、

例如,除非設置 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 事件被觸發時”部分。這意味著,如果在執行上述任一操作時按下 A3 等鍵,這些屬性的值將為 true ,用于 keydown 事件。鍵也處于按下狀態。

重點關注以下 CodePen 演示后,嘗試按單個鍵或組合鍵,以查看不同屬性的值發生變化。

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

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

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

這意味著,如果您的代碼依賴于檢測特定鍵,則務必確保您使用 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。僅當您同時按 ShiftB 時,此塊中的代碼才會執行??,因為這種組合會導致 event.key 屬性成為大寫“B”。

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

以下 CodePen 演示展示了這一切的實際效果:

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

最終想法

在本教程中,我們學習了 JavaScript 中鍵盤事件的基礎知識。按下并釋放鍵盤上的按鍵將分別觸發 keydown 和 keyup 事件。與這些事件關聯的 event 對象包含您確定按下了哪個鍵并采取適當操作所需的所有信息。

請記住,鍵盤只是眾多可能的輸入設備之一。因此,使用鍵盤檢測任何輸入可能并不總是能達到預期效果。在這種情況下,您應該考慮使用與輸入相關的事件。

? 版權聲明
THE END
喜歡就支持一下吧
點贊7 分享