JavaScript：捕捉鍵盤事件並做出反應
在本文中，我們將討論如何在 JavaScript 中擷取並回應不同的鍵盤事件。我將向您展示幾個現實世界的範例，以使其易於理解。
JavaScript 是網路的核心技術之一。大多數網站都使用它，並且所有現代網頁瀏覽器都支援它，而不需要插件。在本系列中，我們將討論不同的提示和技巧，它們將幫助您進行日常 JavaScript 開發。
身為 JavaScript 開發人員，有時您需要實作一些功能，要求您處理鍵盤事件並根據它們執行操作。幸運的是，JavaScript 提供了一個內建的 KeyboardEvent 對象，它允許您處理不同類型的鍵盤事件。
JavaScript 中的鍵盤事件
在 JavaScript 中，KeyboardEvent 物件提供了三個事件：按鍵按下、按鍵按下和按鍵彈起。
當您按下鍵盤上的任意按鍵時，一系列事件將按以下順序發生。
- 按下鍵
- 按鍵
- 按鍵
當按下鍵盤上的任意鍵時，會觸發按鍵事件。並且如果長時間按下某個鍵，則會重複觸發按鍵按下事件。
按鍵事件主要在按下任何可列印字元時觸發，並在按鍵事件後觸發。事實上，按鍵事件用於中繼按鍵事件產生的字元。大多數情況下，非字元鍵不會引發按鍵事件。儘管某些瀏覽器支援此事件，但不建議依賴此事件，因為它將從網路標準中刪除。
按鍵事件已被棄用，並將在現代瀏覽器中逐步淘汰。最後，釋放按鍵時會引發按鍵事件。基本上，按鍵按下和按鍵按下事件的組合為您提供了一個代碼，該代碼指示按下的鍵。
每個鍵盤事件都提供兩個重要的屬性：key 和 code。 key 屬性以按下的字元填充，而 code 屬性以字元的實體鍵位置填充。例如，如果按 a 字元鍵，則 key 屬性將填入 a，並且 code 屬性將填入 KeyA 常數。但是，按下的鍵碼不一定與字元相同！如果使用者設定了備用鍵盤佈局，例如 Dvorak，則按相同的鍵代碼將產生不同的字元。
以上是 JavaScript 中鍵盤事件的簡短概述。從下一節開始，我們將討論這些事件以及現實世界的範例，以了解它們是如何運作的。
keydown 事件
在本節中，我們將了解 keydown 事件如何在 JavaScript 中運作。當按下鍵盤上的任一鍵時，會觸發 keydown 事件。
讓我們快速瀏覽一下以下範例。
document.addEventListener('keydown', (event) => {
var keyValue = event.key;
var codeValue = event.code;
console.log("keyValue: " + keyValue);
console.log("codeValue: " + codeValue);
}, false);
如您所見，我們建立了一個監聽器來監聽 keydown 事件。每當按下任何鍵時，都會呼叫我們的偵聽器，並將該鍵的值和程式碼記錄到控制台。繼續運行它，看看它是如何工作的。
讓我們看一下以下範例，該範例示範如何偵測使用者是否按下了 ctrl a 或 ctrl A。
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 鍵。因此，如果 ctrlKey 為 true，則表示按下了 Ctrl 鍵。
接下來，我們檢查按下的字元的keyCode 值，如果是65 或97，則表示是a 或A 與Ctrl 鍵一起按下。 KeyboardEvent 物件的 keyCode 屬性傳回按下的按鍵的 Unicode 字元代碼。同樣，您也可以使用 KeyboardEvent 物件的 <strong>shiftKey</strong> 屬性，該屬性告訴您在按下按鍵事件時是否按下了 Shift 鍵。觸發。
最後，讓我們看一下以下範例，該範例示範如何在 HTML 表單的輸入欄位中僅允許使用字母。
<script>
function allowOnlyAlphabets(event) {
var charCode = event.keyCode;
if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123))
return true;
else
return false;
}
</script>
<html>
<body>
<div>
<input type="text" onkeydown="return allowOnlyAlphabets(event);">
</div>
</body>
</html>
在上面的範例中，我們在輸入文字方塊上定義了 keydown 事件。因此，當使用者在文字方塊中輸入任何文字時，它會呼叫 allowOnlyAlphabets 函數。在 allowOnlyAlphabets 函數中，我們根據字母表的有效 Unicode 範圍驗證了事件物件的 keyCode 屬性的值。因此，如果使用者按下有效的字母字符，則 allowOnlyAlphabets 函數將傳回 true，否則將傳回 false。最終結果是用戶將無法輸入除字母之外的任何字元。
keyup 事件
在本节中，我们将了解 keyup 事件如何工作。事实上，它的工作原理与 keydown 事件非常相似，唯一的区别是它是在释放按键时触发，而不是在按下按键时触发。
让我们看一下下面的例子。
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 事件。例如，如果您按 a 键，您应该在控制台上看到以下输出。请务必注意事件的触发顺序。
keydown event, keyValue: a keydown event, codeValue: KeyA keyup event, keyValue: a keyup event, codeValue: KeyA
让我们看一下以下示例，它演示了如何在项目中使用 keyup 事件。
<script>
function getSearchResults(event, element) {
if (element.value.length > 6) {
var searchKeyword = element.value;
// make an AJAX call to fetch search results for "searchKeyword"
}
}
</script>
<html>
<body>
<div>
<input type="text" onkeyup="return getSearchResults(event, this);">
</div>
</body>
</html>
在上面的示例中，我们在输入文本框上定义了 onkeyup 事件。因此，当用户在文本框中输入任何文本时，它都会调用 getSearchResults 函数。在 getSearchResults 函数中，我们将进行 AJAX 调用来获取搜索关键字的搜索结果。这也称为实时搜索，因为它会立即显示搜索结果，而无需刷新整个页面。
重要的 KeyboardEvent 对象属性
在最后一节中，我将总结 KeyboardEvent 对象的重要属性。事实上，我们已经在到目前为止讨论的示例中看到了一些常用的属性，例如 key 和 code。我们还将在本节中讨论一些其他重要属性。
-
<strong>key</strong>：返回按下的字符。例如，如果按下a字符，则会返回a。 -
<strong>code</strong>：返回字符的物理键码。例如，如果按下a字符，则会返回KeyA。 -
<strong>keyCode</strong>：返回按下的按键的Unicode字符代码。 -
<strong>ctrlKey</strong>：告诉您触发按键事件时是否按下Ctrl键。 -
<strong>altKey</strong>：告诉您触发按键事件时是否按下了Alt键。 -
<strong>shiftKey</strong>：告诉您触发按键事件时是否按下Shift键。 -
<strong>metaKey</strong>：告诉你触发按键事件时是否按下了Meta键。在大多数情况下，Meta 键是键盘上位于 Ctrl 和 Alt 键之间的键。 -
<strong>位置</strong>：返回键盘或设备上按键的位置。
如您所见，keyboardEvent 对象提供了各种属性，允许您检测不同的按键。在大多数情况下，您将使用 keydown 事件来检测按下的按键并执行相应的操作。正如我们之前讨论的，您不应该使用 keypress 事件，因为它迟早会被弃用。
结论
今天，我们讨论了如何在 JavaScript 中使用键盘事件以及几个实际示例。
以上是JavaScript：捕捉鍵盤事件並做出反應的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
wordpress文章列表怎麼調
Apr 20, 2025 am 10:48 AM
有四種方法可以調整 WordPress 文章列表：使用主題選項、使用插件（如 Post Types Order、WP Post List、Boxy Stuff）、使用代碼（在 functions.php 文件中添加設置）或直接修改 WordPress 數據庫。
如何開始WordPress博客：初學者的分步指南
Apr 17, 2025 am 08:25 AM
博客是人們在網上表達觀點、意見和見解的理想平台。許多新手渴望建立自己的網站，卻因擔心技術障礙或成本問題而猶豫不決。然而，隨著平台不斷發展以滿足初學者的能力和需求，現在開始變得比以往任何時候都更容易。 本文將逐步指導您如何建立一個WordPress博客，從主題選擇到使用插件提升安全性和性能，助您輕鬆創建自己的網站。 選擇博客主題和方向 在購買域名或註冊主機之前，最好先確定您計劃涵蓋的主題。個人網站可以圍繞旅行、烹飪、產品評論、音樂或任何激發您興趣的愛好展開。專注於您真正感興趣的領域可以鼓勵持續寫作
如何在 WordPress 中獲取登錄用戶信息以獲得個性化結果
Apr 19, 2025 pm 11:57 PM
最近，我們向您展示瞭如何通過允許用戶將自己喜歡的帖子保存在個性化庫中來為用戶創建個性化體驗。您可以通過在某些地方（即歡迎屏幕）使用他們的名字，將個性化結果提升到另一個水平。幸運的是，WordPress使獲取登錄用戶的信息變得非常容易。在本文中，我們將向您展示如何檢索與當前登錄用戶相關的信息。我們將利用get_currentuserinfo(); 功能。這可以在主題中的任何地方使用（頁眉、頁腳、側邊欄、頁面模板等）。為了使其工作，用戶必須登錄。因此我們需要使用
如何在父分類的存檔頁面上顯示子分類
Apr 19, 2025 pm 11:54 PM
您想了解如何在父分類存檔頁面上顯示子分類嗎？在自定義分類存檔頁面時，您可能需要執行此操作，以使其對訪問者更有用。在本文中，我們將向您展示如何在父分類存檔頁面上輕鬆顯示子分類。為什麼在父分類存檔頁面上顯示子分類？通過在父分類存檔頁面上顯示所有子分類，您可以使其不那麼通用，對訪問者更有用。例如，如果您運行一個關於書籍的WordPress博客，並且有一個名為“主題”的分類法，那麼您可以添加“小說”、“非小說”等子分類法，以便您的讀者可以
如何在 WordPress 中按帖子過期日期對帖子進行排序
Apr 19, 2025 pm 11:48 PM
過去，我們分享過如何使用PostExpirator插件使WordPress中的帖子過期。好吧，在創建活動列表網站時，我們發現這個插件非常有用。我們可以輕鬆刪除過期的活動列表。其次，多虧了這個插件，按帖子過期日期對帖子進行排序也非常容易。在本文中，我們將向您展示如何在WordPress中按帖子過期日期對帖子進行排序。更新了代碼以反映插件中更改自定義字段名稱的更改。感謝Tajim在評論中讓我們知道。在我們的特定項目中，我們將事件作為自定義帖子類型。現在
如何使用 IFTTT 自動化 WordPress 和社交媒體（及更多）
Apr 18, 2025 am 11:27 AM
您是否正在尋找自動化 WordPress 網站和社交媒體帳戶的方法？ 通過自動化，您將能夠在 Facebook、Twitter、LinkedIn、Instagram 等平台上自動分享您的 WordPress 博客文章或更新。 在本文中，我們將向您展示如何使用 IFTTT、Zapier 和 Uncanny Automator 輕鬆實現 WordPress 和社交媒體的自動化。 為什麼要自動化 WordPress 和社交媒體？ 自動化您的WordPre
如何在 WordPress 中顯示查詢數量和頁面加載時間
Apr 19, 2025 pm 11:51 PM
我們的一位用戶詢問其他網站如何在頁腳中顯示查詢數量和頁面加載時間。您經常會在網站的頁腳中看到這一點，它可能會顯示類似以下內容：“1.248秒內64個查詢”。在本文中，我們將向您展示如何在WordPress中顯示查詢數量和頁面加載時間。只需將以下代碼粘貼到主題文件中您喜歡的任何位置（例如footer.php）。 queriesin
wordpress主機怎麼建站
Apr 20, 2025 am 11:12 AM
要使用 WordPress 主機建站，需要：選擇一個可靠的主機提供商。購買一個域名。設置 WordPress 主機帳戶。選擇一個主題。添加頁面和文章。安裝插件。自定義您的網站。發布您的網站。
