键盘敲敲敲！手把手教你用JS捕获键盘事件（keyCode+keydown实战教程）

还在为HTML中如何捕获键盘事件而烦恼吗？本文带你轻松玩转JavaScript键盘事件！通过`addEventListener`绑定`keydown`、`keyup`或`keypress`事件，利用`event.key`或`event.code`属性，即可精准获取用户按键信息。告别`keyCode`的浏览器兼容性问题，`key`属性获取字符值，`code`属性获取物理键位，灵活选择，满足不同需求。更有阻止默认行为、处理组合键、监听特定元素事件等实用技巧，结合`input`事件处理文本输入更高效。掌握这些，让你的网页键盘交互体验更上一层楼！快来学习HTML中JavaScript捕获键盘事件的实战技巧吧！

在HTML中通过JavaScript捕获键盘事件的方法是使用addEventListener绑定keydown、keyup或keypress事件，并利用event.key或event.code获取按键信息。1. keydown用于检测按键按下，code取代了keyCode以解决跨浏览器一致性问题；2. key返回字符值受大小写和布局影响，code返回物理键位不受影响；3. 阻止默认行为可用event.preventDefault()，如阻止空格输入；4. 组合键可通过检查ctrlKey、shiftKey等属性实现，如Ctrl+C；5. 特定元素监听需将事件绑定到该元素而非document；6. 文本输入推荐input事件，因其支持粘贴、拖拽等多种输入方式。选择合适属性和事件类型可提升兼容性与功能准确性。

在HTML中，我们可以通过JavaScript来捕获键盘事件，主要依赖于keydown、keyup和keypress这三个事件类型。其中，keydown通常用于检测用户按下了哪个键，而keyCode属性则能告诉你具体是哪个键被按下。不过，keyCode已经逐渐被key和code属性取代，因为keyCode在不同浏览器和操作系统上的表现并不一致。

解决方案：

要捕获键盘事件，首先你需要一个HTML元素来监听这些事件。通常，你会选择document或特定的input元素。然后，使用addEventListener方法来绑定事件监听器。

document.addEventListener('keydown', function(event) {
  // event.keyCode 已经被弃用，推荐使用 event.key 或 event.code
  console.log('你按下了: ' + event.key); // 输出按下的键的字符值
  console.log('你按下了 (code): ' + event.code); // 输出按下的键的物理位置
});

这段代码会监听整个文档的keydown事件，并在控制台输出你按下的键的字符值和物理位置。event.key会返回按键的字符值，例如 "a"、"Enter"、"Shift"。event.code会返回按键的物理位置，例如 "KeyA"、"Enter"、"ShiftLeft"。

key vs code：选择哪个？

key属性提供的是按键的字符值，它会受到键盘布局和大小写的影响。例如，如果你按下了Shift+A，key会返回 "A"。而code属性提供的是按键的物理位置，它不受键盘布局和大小写的影响。例如，如果你按下了Shift+A，code仍然会返回 "KeyA"。

选择哪个属性取决于你的需求。如果你需要知道用户按下了哪个字符，那么key属性更适合你。如果你需要知道用户按下了哪个物理按键，那么code属性更适合你。

为什么keyCode被弃用了？

keyCode属性的问题在于它在不同浏览器和操作系统上的表现并不一致。例如，在某些浏览器上，keyCode会返回按键的ASCII码，而在另一些浏览器上，它会返回按键的虚拟键码。这导致了跨浏览器兼容性问题。

key和code属性的出现是为了解决这个问题。它们提供了更一致和可靠的方式来获取按键的信息。

如何阻止默认行为？

有时候，你可能需要阻止按键的默认行为。例如，你可能想阻止用户在输入框中输入某些字符，或者阻止浏览器滚动页面。你可以使用preventDefault()方法来阻止默认行为。

document.addEventListener('keydown', function(event) {
  if (event.key === ' ') {
    event.preventDefault(); // 阻止空格键的默认行为
    console.log('空格键被阻止了！');
  }
});

这段代码会阻止空格键的默认行为，例如在输入框中输入空格。

如何处理组合键？

处理组合键（例如Ctrl+C）需要检查多个按键是否同时被按下。你可以使用event.ctrlKey、event.shiftKey和event.altKey属性来检查Ctrl、Shift和Alt键是否被按下。

document.addEventListener('keydown', function(event) {
  if (event.ctrlKey && event.key === 'c') {
    console.log('你按下了Ctrl+C！');
    // 执行复制操作
  }
});

这段代码会检测用户是否按下了Ctrl+C，并输出一条消息。

如何只监听特定元素的键盘事件？

如果你只想监听特定元素的键盘事件，可以将事件监听器绑定到该元素上。

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

<script>
  const inputElement = document.getElementById('myInput');

  inputElement.addEventListener('keydown', function(event) {
    console.log('输入框中按下了: ' + event.key);
  });
</script>

这段代码只会监听id为myInput的输入框的键盘事件。

如何处理文本输入事件？

除了keydown事件，你还可以使用input事件来处理文本输入。input事件在文本输入框的值发生变化时触发。

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

<script>
  const inputElement = document.getElementById('myInput');

  inputElement.addEventListener('input', function(event) {
    console.log('输入框的值发生了变化: ' + inputElement.value);
  });
</script>

这段代码会在输入框的值发生变化时输出新的值。input事件比keydown事件更适合处理文本输入，因为它能处理所有类型的输入，包括粘贴、拖拽等。

总而言之，JavaScript捕获键盘事件的关键在于使用addEventListener方法绑定keydown、keyup或keypress事件，并使用event.key或event.code属性来获取按键的信息。 记得根据实际需求选择合适的事件类型和属性，并考虑跨浏览器兼容性。

好了，本文到此结束，带大家了解了《键盘敲敲敲！手把手教你用JS捕获键盘事件（keyCode+keydown实战教程）》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！