📜  HTML | DOM KeyboardEvent keyCode 属性(1)

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

HTML | DOM KeyboardEvent keyCode 属性

键盘事件是Web开发中常用的一种输入方式,当用户在网页上按下或释放键盘上的某个按键时触发。在处理键盘事件时,我们通常需要知道用户按下/释放的是哪个键,这就需要使用 KeyboardEvent 对象的 keyCode 属性。

语法
event.keyCode
描述

keyCode 属性包含一个表示按键代码的整数,用于识别用户按下/释放的键是哪一个。根据不同的键盘布局和浏览器,keyCode 的值可能不同。通常,大写字母键的 keyCode 值与其 ASCII 码相同,数字键的 keyCode 与数字键的数字相同,而功能键、控制键和方向键等则没有固定的 keyCode 值。如果要检测这些键的按下/释放事件,通常需要使用 event.key、event.code 或 event.which 属性。

在键盘事件的处理函数中,可以使用 keyCode 属性判断用户按下/释放的是哪一个键,从而执行相应的操作。

示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>KeyboardEvent Example</title>
</head>
<body>
  <input type="text" id="textInput">
  <script>
    let textInput = document.getElementById("textInput");
    textInput.addEventListener("keydown", function(event) {
      console.log("keyCode: " + event.keyCode);
      if (event.keyCode === 13) {
        console.log("Enter key pressed!");
      }
    });
  </script>
</body>
</html>

在上述示例中,我们创建了一个文本输入框,当用户在文本框中按下键盘上的某个键时,会触发 keydown 事件,并执行处理函数。在处理函数中,我们输出 keyCode 的值,并判断用户是否按下了 Enter 键。如果按下了 Enter 键,就输出相应的提示信息。