键盘事件 JS - JavaScript

键盘事件是JavaScript中非常常用的一种事件类型，可以帮助我们获取用户在键盘上所输入的字符、按键以及组合键等信息。在Web开发中，键盘事件可以被用来实现一些常见的功能，比如快捷键、搜索框提示、游戏等等。

监听键盘事件

在JavaScript中，我们可以通过addEventListener()方法来为元素添加事件监听器，也可以通过onkeydown、onkeyup、onkeypress等属性来为元素添加事件处理程序。下面是一个监听键盘事件的示例：

document.addEventListener('keydown', function(event) {
  console.log('You pressed the ' + event.key + ' key');
});

上面的代码片段中，我们为整个document添加了一个'keydown'事件监听器，当监听到用户按下某个键时，就会打印相应的信息到控制台中。

键盘事件属性

在键盘事件处理程序中，我们可以使用很多与键盘相关的属性来获取用户的输入信息，下面是一些常用的属性：

• event.key: 返回当前按下的键的名称，如'a'、'1'、'Enter'、'Escape'等等。
• event.keyCode: 返回当前按下的键的ASCII码值。
• event.shiftKey: 返回一个布尔值，用来表明Shift键是否被按下。
• event.ctrlKey: 返回一个布尔值，用来表明Ctrl键是否被按下。
• event.altKey: 返回一个布尔值，用来表明Alt键是否被按下。
• event.metaKey: 返回一个布尔值，用来表明Meta键（Windows键或Cmd键）是否被按下。

键盘事件类型

在JavaScript中，有三种不同的键盘事件类型：keypress、keydown和keyup。它们分别代表了按下、按住和松开键盘上的按键。这些事件类别可以被用于同时捕获按键、设置快捷键、验证表单等等。下面是一些键盘事件的实例：

• keypress事件：当按下一个键时触发，只有在按住的键是一个字符键（包括数字、字母、符号等）时才触发。
• keydown事件：当按下一个键时触发，无论是字符键还是非字符键，只要键盘上有一个键按下了，就会触发keydown事件。
• keyup事件：当释放一个键时触发，无论是字符键还是非字符键，只要键盘上有一个键被释放了，就会触发keyup事件。

实例

下面是几个用键盘事件实现的实例：

实现快捷键

当用户按下Ctrl + X时，选中的文本将被剪切：

<input type="text" id="my-input">

<script>
document.addEventListener('keydown', function(event) {
  if (event.ctrlKey && event.key === 'x') {
    const input = document.getElementById('my-input');
    const selectionStart = input.selectionStart;
    const selectionEnd = input.selectionEnd;
    const value = input.value;
    const cutText = value.substring(selectionStart, selectionEnd);
    input.value = value.slice(0, selectionStart) + value.slice(selectionEnd);
    input.setSelectionRange(selectionStart, selectionStart);
    event.preventDefault();
    console.log('Cut text:', cutText);
  }
});
</script>

实现上下左右移动

当用户按下上下左右箭头键时，让一个小方块移动：

<div id="my-box" style="position: absolute; top: 50px; left: 50px; width: 50px; height: 50px; background-color: #278ce2;"></div>

<script>
document.addEventListener('keydown', function(event) {
  const box = document.getElementById('my-box');
  const speed = 10;
  switch (event.key) {
    case 'ArrowUp':
      box.style.top = (box.offsetTop - speed) + 'px';
      break;
    case 'ArrowDown':
      box.style.top = (box.offsetTop + speed) + 'px';
      break;
    case 'ArrowLeft':
      box.style.left = (box.offsetLeft - speed) + 'px';
      break;
    case 'ArrowRight':
      box.style.left = (box.offsetLeft + speed) + 'px';
      break;
  }
});
</script>

实现防止表单提交

当用户按下回车键时，防止表单自动提交：

<form>
  <label for="my-input">Input:</label>
  <input type="text" id="my-input">
  <button type="submit">Submit</button>
</form>

<script>
const form = document.querySelector('form');
form.addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    event.preventDefault();
    console.log('Enter key pressed, form not submitted');
  }
});
</script>

结论

在JavaScript中，键盘事件是非常重要的一种事件类型，可以帮助我们实现很多常见的功能，比如快捷键、游戏、搜索框提示等等。通过监听键盘事件，我们可以获取用户的按键信息、设置快捷键、实现文本框的填充、防止表单提交等等。希望这篇文章能够帮助你更好地理解键盘事件的使用方法。