JavaScript - 键盘事件

上一页
下一页

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

常见键盘事件

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

键盘事件属性

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

属性 描述
event.key 表示按下的键的键值的 String。
event.code 表示键盘上物理键的 String。
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 事件用于捕获键入的字符。键入字符时，事件侦听器将触发，并且该字符将显示在 HTML 元素中，ID 为“output”。


<!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>
打印本页
上一页
下一页