📌  相关文章
📜  HTML | DOM onkeydown 事件(1)

📅  最后修改于: 2023-12-03 15:01:12.025000             🧑  作者: Mango

HTML | DOM onkeydown 事件

简介

onkeydown 事件是 HTML DOM 中的一种键盘事件。当用户按下任何键时，就会触发此事件。onkeydown事件与onkeypress事件密切相关，但它们之间仍有一些区别。onkeydown 可以检测到所有的键，而 onkeypress 只能检测字符键（大小写字母，数字以及符号）。

使用方式
<!DOCTYPE html>
<html>
<body>

<p>请按下任意键!</p>

<script>
document.addEventListener("keydown", function(event) {
  alert("您按下了键码为："+event.keyCode+" 的键！");
});
</script>

</body>
</html>

在上述示例中，我们使用了 document.addEventListener() 方法来添加 onkeydown 事件，当用户敲击键盘时，就会触发此事件。JavaScript 函数检测到按下的键，并显示出用户按下的键码。

属性

事件代码 event.keyCode 常用于 onkeydown 事件，它可以获取用户按下的键码值。下面是该事件中常用的一些属性：

  • event.altKey：返回按下 alt 键的 true/false 值。
  • event.ctrlKey：返回按下 ctrl 键的 true/false 值。
  • event.keyCode：返回按下键的 Unicode 编码值。
  • event.shiftKey：返回按下 shift 键的 true/false 值。
示例

下面是一个简单的示例，当用户按下回车键时，就会触发事件，执行相关的操作：

<!DOCTYPE html>
<html>
<body>

<input type="text" id="myInput" onkeydown="myFunction()">

<script>
function myFunction() {
  var x = document.getElementById("myInput");
  if (event.keyCode === 13) {
    alert("您按下了回车键！！");
  }
}
</script>

</body>
</html>

在上述示例中，我们为输入框添加了 onkeydown 事件，并检测用户是否按下了回车键。如果用户按下了回车键，就会弹出相关提示信息。

总结

onkeydown 事件是 HTML DOM 中的一种键盘事件，可以检测到所有的键。我们可以使用该事件来监听用户在页面上按下了哪些键，从而实现不同的交互操作。