JavaScript - 鍵盤事件

JavaScript 中的鍵盤事件提供了一種基於使用者鍵盤輸入與網頁或應用程式互動的方式。這些事件允許開發者捕獲並響應各種鍵盤操作，例如按鍵按下、按鍵釋放和字元輸入。JavaScript 中的主要鍵盤事件包括 keydown、keypress 和 keyup。

常見的鍵盤事件

keydown 事件 - 當按下鍵盤上的一個鍵時，會觸發 keydown 事件。此事件為開發者提供了有關所按特定鍵的資訊：包括其程式碼以及是否還按下了 Shift、Ctrl 或 Alt 等修飾鍵的指示。
keypress 事件 - 當用戶鍵入實際字元時，會觸發 keypress 事件。非字元鍵（例如 Shift 或 Ctrl）不會啟用此事件。開發者經常使用它來捕獲表單欄位的使用者輸入或建立互動式打字功能。
keyup 事件 - 當釋放先前按下的鍵時，系統會啟動 keyup 事件的觸發；此事件在跟蹤特定鍵的釋放以及隨後實現操作方面非常有用，從而建立互動式使用者體驗。

鍵盤事件屬性

對於 JavaScript 中的鍵盤事件，通常使用多個屬性來收集有關所按鍵的資訊。以下是與鍵盤事件特別相關的關鍵屬性：

屬性	描述
event.key	表示所按鍵的鍵值的字串。
event.code	表示鍵盤上物理鍵的字串。
event.location	表示鍵盤上鍵位置的整數。
event.ctrlKey	布林值，指示是否按下了 Ctrl 鍵。
event.shiftKey	布林值，指示是否按下了 Shift 鍵。
event.altKey	布林值，指示是否按下了 Alt 鍵。
event.metaKey	布林值，指示是否按下了 Meta（Command）鍵。
event.repeat	布林值，指示鍵事件是否為重複事件。
event.isComposing	布林值，指示事件是否為多個按鍵組合的一部分。
event.which	已棄用的屬性；以前用於識別數字鍵程式碼。
event.getModifierState(keyArg)	返回布林值的方法，指示是否按下了修飾鍵。

示例：keydown 事件

此示例演示了 JavaScript keydown 事件的應用。事件監聽器在按下任何鍵時捕獲 keydown 事件，並在標識為“output”的 HTML 元素中顯示其對應的鍵（一個事件屬性）。

<!DOCTYPE html>
<html>
<body>
   <h3>Press any key</h3>
   <script>
      document.addEventListener('keydown', function (event) {
         document.getElementById('output').innerHTML = 
		 "Key pressed: " + event.key;
      });
   </script>
   <div id="output"></div>
</body>
</html>

示例：keypress 事件

在此示例中，keypress 事件用於捕獲鍵入的字元。當鍵入字元時，事件監聽器會觸發，並且該字元會顯示在 id 為“output”的 HTML 元素中。

<!DOCTYPE html>
<html>
<body>
   <h3>Type a character</h3>
   <div id="output"></div>
   <script>
      document.addEventListener('keypress', function (event) {
         document.getElementById('output').innerHTML = 
         "Character pressed: " + event.key;
      });
   </script>   
</body>
</html>

示例：keyup 事件

本示例展示了 keyup 事件。它在按下鍵後釋放鍵時捕獲事件。然後在螢幕上顯示釋放的鍵。

<!DOCTYPE html>
<html>
<body>
   <h3>Press and Release a key</h3>
   <div id="output"></div>
   <script>
      document.addEventListener('keyup', function (event) {
         document.getElementById('output').innerHTML = 
		 "Key released: " + event.key;
      });
   </script>    
</body>
</html>

keydown 和 keypress 之間存在差異。keydown 在按下任何鍵時都會觸發，提供有關所按鍵的資訊，包括修飾鍵。keypress 僅在按下字元鍵時觸發，提供有關鍵入字元的資訊，而無需關於修飾鍵的詳細資訊。只要按住鍵，keydown 就會持續觸發。

在以上所有示例中，我們都使用了 addEventListener，但也可以不使用此函式來監聽這些事件。這是因為您可以將事件處理程式直接分配給特定屬性。但是，請記住，使用 addEventListener 通常被認為是一種更好的實踐，因為它允許您將多個事件處理程式附加到同一事件，並且它將 JavaScript 邏輯與 HTML 結構分開。

示例：不使用 addEventListener 方法

在此示例中，我們有一個輸入框。當它檢測到 keydown 事件 (onkeydown) 時，會呼叫 handleKeyDown 函式；當它檢測到 keyup 事件 (onkeyup) 時，會呼叫 handleKeyUp 函式。這兩個函式都會在螢幕上列印相應的訊息。

<!DOCTYPE html>
<html>
<body>
   <div>Enter some text: 
      <input onkeydown="handleKeyDown(event)" onkeyup="handleKeyUp(event)">
   </div>
   <div id="output"></div>
   <script>
      function handleKeyDown(event) {
         document.getElementById('output').innerHTML+= 
		 "Key pressed: " + event.key+'<br>Key code: ' + event.keyCode+'<br>';
      }
      function handleKeyUp(event) {
         document.getElementById('output').innerHTML+= 
		 "Key released: ' + event.key+'<br><br>";
      }
   </script>
</body>
</html>

列印頁面