在本文中，我們將討論如何在 JavaScript 中捕獲并響應不同的鍵盤事件。愛掏網 - it200.com我將向您展示幾個現實世界的示例，以使其易于理解。愛掏網 - it200.com
JavaScript 是網絡的核心技術之一。愛掏網 - it200.com大多數網站都使用它，并且所有現代網絡瀏覽器都支持它，而不需要插件。愛掏網 - it200.com在本系列中，我們將討論不同的提示和技巧，它們將幫助您進行日常 JavaScript 開發。愛掏網 - it200.com
作為一名 JavaScript 開發人員，有時您需要實現一些功能，要求您處理鍵盤事件并根據它們執行操作。愛掏網 - it200.com幸運的是，JavaScript 提供了一個內置的 KeyboardEvent 對象，它允許您處理不同類型的鍵盤事件。愛掏網 - it200.com
在 JavaScript 中，KeyboardEvent 對象提供了三個事件：按鍵按下、按鍵按下和按鍵彈起。愛掏網 - it200.com
當您按下鍵盤上的任意鍵時，一系列事件將按以下順序發生。愛掏網 - it200.com
- 按下鍵
- 按鍵
- 按鍵
當按下鍵盤上的任意鍵時，會觸發按鍵事件。愛掏網 - it200.com并且如果長時間按下某個鍵，則會重復觸發按鍵按下事件。愛掏網 - it200.com
按鍵事件主要在按下任何可打印字符時觸發，并在按鍵事件后觸發。愛掏網 - it200.com事實上，按鍵事件用于中繼按鍵事件產生的字符。愛掏網 - it200.com大多數情況下，非字符鍵不會引發按鍵事件。愛掏網 - it200.com盡管某些瀏覽器支持此事件，但不建議依賴此事件，因為它將從網絡標準中刪除。愛掏網 - it200.com
按鍵事件已被棄用，并將在現代瀏覽器中逐步淘汰。愛掏網 - it200.com最后，釋放按鍵時會引發按鍵事件。愛掏網 - it200.com基本上，按鍵按下和按鍵按下事件的組合為您提供了一個代碼，該代碼指示按下的鍵。愛掏網 - it200.com
每個鍵盤事件都提供兩個重要的屬性：key 和 code。愛掏網 - it200.com key 屬性用按下的字符填充，而 code 屬性用字符的物理鍵位置填充。愛掏網 - it200.com例如，如果按 a 字符鍵，則 key 屬性將填充為 a，并且 code 屬性將填充為 KeyA 常量。愛掏網 - it200.com但是，按下的鍵碼不一定與字符相同！如果用戶設置了備用鍵盤布局，例如 Dvorak，則按相同的鍵代碼將產生不同的字符。愛掏網 - it200.com
以上是 JavaScript 中鍵盤事件的簡要概述。愛掏網 - it200.com從下一節開始，我們將討論這些事件以及現實世界的示例，以了解它們是如何工作的。愛掏網 - it200.com
在本節中，我們將了解 keydown 事件如何在 JavaScript 中工作。愛掏網 - it200.com當按下鍵盤上的任意鍵時，會觸發 keydown 事件。愛掏網 - it200.com
讓我們快速瀏覽一下以下示例。愛掏網 - it200.com
document.addEventListener('keydown', (event) => {
var keyValue = event.key;
var codeValue = event.code;
console.log("keyValue: " + keyValue);
console.log("codeValue: " + codeValue);
}, false);
登錄后復制
如您所見，我們創建了一個監聽器來監聽 keydown 事件。愛掏網 - it200.com每當按下任何鍵時，都會調用我們的偵聽器，并將該鍵的值和代碼記錄到控制臺。愛掏網 - it200.com繼續運行它，看看它是如何工作的。愛掏網 - it200.com
讓我們看一下以下示例，該示例演示如何檢測用戶是否按下了 ctrl + a 或 ctrl + A。愛掏網 - it200.com
document.addEventListener('keydown', (event) => {
if (event.ctrlKey) {
if (event.keyCode == 65 || event.keyCode == 97) {
console.log("You have just pressed Ctrl + a/A!");
}
}
}, false);
登錄后復制
首先， ctrlKey 是 KeyboardEvent 對象的一個??特殊屬性，它告訴您在觸發 keydown 事件時是否按下了 Ctrl 鍵。愛掏網 - it200.com因此，如果 ctrlKey 為 true，則表示按下了 Ctrl 鍵。愛掏網 - it200.com
接下來，我們檢查按下的字符的 keyCode 值，如果是 65 或 97，則表示是 a 或 A 與 Ctrl 鍵一起按下。愛掏網 - it200.com KeyboardEvent 對象的 keyCode 屬性返回按下的鍵的 Unicode 字符代碼。愛掏網 - it200.com同樣，您還可以使用 KeyboardEvent 對象的 shiftKey 屬性，該屬性告訴您在按下按鍵事件時是否按下了 Shift 鍵。愛掏網 - it200.com觸發。愛掏網 - it200.com
最后，讓我們看一下以下示例，該示例演示如何在 HTML 表單的輸入字段中僅允許使用字母。愛掏網 - it200.com
登錄后復制
在上面的示例中，我們在輸入文本框上定義了 keydown 事件。愛掏網 - it200.com因此，當用戶在文本框中輸入任何文本時，它會調用 allowOnlyAlphabets 函數。愛掏網 - it200.com在 allowOnlyAlphabets 函數中，我們根據字母表的有效 Unicode 范圍驗證了事件對象的 keyCode 屬性的值。愛掏網 - it200.com因此，如果用戶按下有效的字母字符，則 allowOnlyAlphabets 函數將返回 true，否則將返回 false。愛掏網 - it200.com最終結果是用戶將無法輸入除字母之外的任何字符。愛掏網 - it200.com
在本節中，我們將了解 keyup 事件如何工作。愛掏網 - it200.com事實上，它的工作原理與 keydown 事件非常相似，唯一的區別是它是在釋放按鍵時觸發，而不是在按下按鍵時觸發。愛掏網 - it200.com
讓我們看一下下面的例子。愛掏網 - it200.com
document.addEventListener('keydown', (event) => {
var keyValue = event.key;
var codeValue = event.code;
console.log("keydown event, keyValue: " + keyValue);
console.log("keydown event, codeValue: " + codeValue);
}, false);
document.addEventListener('keyup', (event) => {
var keyValue = event.key;
var codeValue = event.code;
console.log("keyup event, keyValue: " + keyValue);
console.log("keyup event, codeValue: " + codeValue);
}, false);
登錄后復制
在上面的示例中，當您按下任意鍵時，將首先觸發 keydown 事件，然后觸發 keyup 事件。愛掏網 - it200.com例如，如果您按 a 鍵，您應該在控制臺上看到以下輸出。愛掏網 - it200.com請務必注意事件的觸發順序。愛掏網 - it200.com
keydown event, keyValue: a keydown event, codeValue: KeyA keyup event, keyValue: a keyup event, codeValue: KeyA登錄后復制
讓我們看一下以下示例，它演示了如何在項目中使用 keyup 事件。愛掏網 - it200.com
登錄后復制
在上面的示例中，我們在輸入文本框上定義了 onkeyup 事件。愛掏網 - it200.com因此，當用戶在文本框中輸入任何文本時，它都會調用 getSearchResults 函數。愛掏網 - it200.com在 getSearchResults 函數中，我們將進行 AJAX 調用來獲取搜索關鍵字的搜索結果。愛掏網 - it200.com這也稱為實時搜索，因為它會立即顯示搜索結果，而無需刷新整個頁面。愛掏網 - it200.com
在最后一節中，我將總結 KeyboardEvent 對象的重要屬性。愛掏網 - it200.com事實上，我們已經在到目前為止討論的示例中看到了一些常用的屬性，例如 key 和 code。愛掏網 - it200.com我們還將在本節中討論一些其他重要屬性。愛掏網 - it200.com
-
key：返回按下的字符。愛掏網 - it200.com例如，如果按下a字符，則會返回a。愛掏網 - it200.com -
code：返回字符的物理鍵碼。愛掏網 - it200.com例如，如果按下a字符，則會返回KeyA。愛掏網 - it200.com -
keyCode：返回按下的按鍵的Unicode字符代碼。愛掏網 - it200.com -
ctrlKey：告訴您觸發按鍵事件時是否按下Ctrl鍵。愛掏網 - it200.com -
altKey：告訴您觸發按鍵事件時是否按下了Alt鍵。愛掏網 - it200.com -
shiftKey：告訴您觸發按鍵事件時是否按下Shift鍵。愛掏網 - it200.com -
metaKey：告訴你觸發按鍵事件時是否按下了Meta鍵。愛掏網 - it200.com在大多數情況下，Meta 鍵是鍵盤上位于 Ctrl 和 Alt 鍵之間的鍵。愛掏網 - it200.com -
位置：返回鍵盤或設備上按鍵的位置。愛掏網 - it200.com
如您所見，keyboardEvent 對象提供了各種屬性，允許您檢測不同的按鍵。愛掏網 - it200.com在大多數情況下，您將使用 keydown 事件來檢測按下的按鍵并執行相應的操作。愛掏網 - it200.com正如我們之前討論的，您不應該使用 keypress 事件，因為它遲早會被棄用。愛掏網 - it200.com
今天，我們討論了如何在 JavaScript 中使用鍵盤事件以及幾個實際示例。愛掏網 - it200.com
以上就是JavaScript：捕獲鍵盤事件并做出反應的詳細內容，更多請關注愛掏網 - it200.com其它相關文章！