HTML | DOM 键盘事件代码属性

HTML | DOM 键盘事件代码属性用于在HTML和JavaScript中处理和识别按键事件。常见的用途包括创建键盘快捷键和处理表单输入。

代码属性

以下是常用的HTML | DOM 键盘事件代码属性：

keyCode

按下键盘时的键码值。此属性可在keydown和keyup事件中使用。

document.addEventListener("keydown", function(event) {
  console.log(event.keyCode);
});

charCode

与keyCode相同，但仅用于文本字符。注意，此属性现已被废弃。推荐使用event.key属性。

document.addEventListener("keydown", function(event) {
  console.log(event.charCode);
});

which

keyCode的跨平台版本。此属性可在keydown和keyup事件中使用。

document.addEventListener("keydown", function(event) {
  console.log(event.which);
});

key

被按下的实际键（而不是keyCode）。该属性可在keydown和keyup事件中使用。

document.addEventListener("keydown", function(event) {
  console.log(event.key);
});

shiftKey, ctrlKey和altKey

一个布尔值，表示判断是否按下了shift，ctrl或alt键。这些属性可以在keydown和keyup事件中使用。

document.addEventListener("keydown", function(event) {
  if (event.shiftKey) {
    console.log("Shift键被按下了");
  }
});

示例

以下是一个使用事件代码属性的示例，该示例在按下Ctrl + D时将当前日期添加到文本输入字段中：

<input type="text" id="myInput">

<script>
  document.addEventListener("keydown", function(event) {
    if (event.ctrlKey && event.key === "d") {
      event.preventDefault();
      var input = document.getElementById("myInput");
      input.value += new Date();
    }
  });
</script>

总结

HTML | DOM 键盘事件代码属性提供了更多的方式来处理键盘事件，可以帮助开发人员创建更好的用户体验和提供更好的交互性。了解这些属性对于处理按键事件非常重要。