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>

打印页面