網站開發人員希望讀者以某種方式與他們的網站進行交互。訪問者可以上下滾動頁面、在輸入字段中寫入內容、單擊鏈接訪問另一個頁面,或者按組合鍵觸發特定行為。作為開發人員,您應該能夠捕獲所有這些事件并向用戶提供所需的功能。
在本教程中,我們的重點將是在 JavaScript 中處理鍵盤事件。我們將了解不同類型的鍵盤事件、處理特殊按鍵事件以及獲取有關按下或釋放的按鍵的信息。
鍵盤事件類型
鍵盤事件分為三種類型。這些稱為 keydown、keypress 和 keyup。
只要按下某個鍵,就會觸發 keydown 事件。所有鍵都會被觸發。它們是否產生角色價值并不重要。例如,按鍵盤上的 A 或 Alt 鍵將觸發 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 事件相關的所有信息。
以下是您應該了解的一些有用屬性:
- key:該屬性返回一個字符串,表示所按鍵的字符值。
- code:此屬性返回一個字符串,表示按下的物理鍵的代碼。
- repeat:如果長時間按住某個鍵,該屬性將返回布爾值 true,導致 keydown 事件多次觸發。
- altKey:如果用戶按下 Alt 鍵(在 Windows 上)或 Option 鍵(在在 macOS 上)當 keydown 事件觸發時。
- ctrlKey:如果用戶在 keydown 事件觸發時按下 Control 鍵,則此屬性返回布爾值 true。
- metaKey:如果用戶在 keydown 事件觸發時按下 Meta 鍵,則此屬性返回布爾值 true。
- 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
這意味著,如果您的代碼依賴于檢測特定鍵,則務必確保您使用 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 對象包含您確定按下了哪個鍵并采取適當操作所需的所有信息。
請記住,鍵盤只是眾多可能的輸入設備之一。因此,使用鍵盤檢測任何輸入可能并不總是能達到預期效果。在這種情況下,您應該考慮使用與輸入相關的事件。