Javascript 简明教程

JavaScript - Keyboard Events

JavaScript 中的键盘事件提供了一种基于用户键盘输入与网页或应用程序互动的方法。这些事件允许开发人员捕获和响应各种键盘操作，例如按键按下、按键松开和字符输入。JavaScript 中的主要键盘事件包括 keydown、keypress 和 keyup。

Common Keyboard Events

Keydown Event − 当按下键盘上的某一按键时，它将触发 keydown 事件。此事件为开发人员提供了有关所按具体键的信息：这包括其代码和一个指示符，指示是否还按下了某些修饰键，例如 Shift、Ctrl 或 Alt。
Keypress Event − 当用户键入实际字符时，会触发 keypress 事件。非字符键（如 Shift 或 Ctrl）不会激活此事件。开发人员经常利用它来捕获表单字段的用户输入或创建交互式打字功能。
Keyup Event − 在松开先前按下的键后，系统会启动 keyup 事件的触发；此特定事件在跟踪特定键的释放并随后实施操作中被证明是有益的，从而创造了交互式用户体验。

Keyboard Event Properties

对于 JavaScript 中的键盘事件，几个属性通常用于收集有关所按按键的信息。以下是一些与键盘事件特别相关的关键属性−

Property

Description

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)

返回一个布尔值的方法，该布尔值指示是否按下修饰键。

Example: Keydown Event

此示例说明了 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>

Example: Keypress Event

在此示例中，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>

Example: Keyup Event

此示例展示了 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 结构分开。

Example: Without using addEventListener method

在此示例中，我们有一个输入框。当它检测到 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>