在JavaScript中捕捉和响应KeyboardEvent的方法及实例

前端小工
669 阅读6分钟

在这篇文章中，我们将讨论如何在JavaScript中捕捉和响应不同的键盘事件。我将向你展示几个真实世界的例子，使其易于理解。

JavaScript是网络的核心技术之一。大多数网站都使用它，而且所有现代网络浏览器都支持它，不需要插件。在这个系列中，我们将讨论不同的技巧和窍门，这将有助于你的日常JavaScript开发。

作为一个JavaScript开发者，有时你需要实现一些功能，这些功能需要你处理键盘事件并根据这些事件执行操作。幸运的是，JavaScript提供了一个内置的KeyboardEvent 对象，它允许你处理不同类型的键盘事件。

JavaScript中的键盘事件

在JavaScript中，KeyboardEvent 对象提供了三个事件：键下、键压和键上。

当你按下键盘上的任何一个键时，一系列的事件会按以下顺序发生。

  • 按键
  • 按键
  • 上键

当你按下键盘上的任何一个键时，就会触发key down事件。而如果一个键被按了很久，就会重复触发按键事件。

按键事件大多是在你按下任何可打印的字符时触发的，它在按下键事件之后被触发。事实上，按键事件是用来转发一个由按键事件产生的字符。大多数情况下，非字符键不会引发压键事件。虽然有些浏览器支持这个事件，但不建议依赖这个事件，因为它将从网络标准中删除。

按键事件已被废弃，并将被现代浏览器逐步淘汰。

最后，当一个键被释放时，会引发按键上升事件。基本上，键下和键上事件的组合为你提供了一个代码，表明被按下的键。

每个键盘事件提供两个重要的属性：key 和code 。key 属性填充了被按下的字符，code 属性填充了该字符的物理按键位置。举个例子，如果你按下了a 字符键，键属性被填充为a ，而code 属性被填充为KeyA 常数。然而，按下的键码不一定与字符相同！如果用户设置了备用键码，那么就会产生一个新的字符。如果用户设置了一个替代的键盘布局，例如Dvorak

这就是对JavaScript中键盘事件的简要概述。从下一节开始，我们将结合现实世界的例子来讨论这些事件，以了解它们的工作原理。

keydown 事件

在本节中，我们将看到keydown 事件在JavaScript中是如何工作的。当键盘上的任何一个键被按下时，keydown 事件就会被触发。

让我们快速浏览一下下面的例子。

document.addEventListener('keydown', (event) => {
  var keyValue = event.key;
  var codeValue = event.code;

  console.log("keyValue: " + keyValue);
  console.log("codeValue: " + codeValue);
}, false);

正如你所看到的，我们已经创建了一个监听器来监听keydown 事件。每当有任何键被按下，我们的监听器就会被调用，并将键的值和代码记录到控制台。继续运行它，看看它是如何工作的。

让我们来看看下面的例子，它演示了如何检测用户是否按下了ctrl + a或ctrl + A。

document.addEventListener('keydown', (event) => {
  if (event.ctrlKey) {
     if (event.keyCode == 65 || event.keyCode == 97) {
         console.log("You have just pressed Ctrl + a/A!");
     }
  }
}, false);

首先，ctrlKey 是KeyboardEvent 对象的一个特殊属性，它告诉你在触发keydown 事件时是否按下了Ctrl键。因此，如果ctrlKey 为真，这意味着Ctrl键被按下了。

接下来，我们检查被按下的字符的keyCode ，如果它是65 或97 ，这意味着A 或A与Ctrl键一起被按下。KeyboardEvent 对象的keyCode 属性返回被按下的键的Unicode字符代码。同样地，你也可以使用KeyboardEvent对象的shiftKey属性，它可以告诉你在触发下键事件时Shift键是否被按下。

最后，让我们来看看下面的例子，它演示了如何在一个HTML表单的输入字段中只允许输入字母。

<script>
function allowOnlyAlphabets(event) {
  var charCode = event.keyCode;

  if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123))
    return true;
  else
    return false;
}
</script>
<html>
  <body>
    <div>
        <input type="text" onkeydown="return allowOnlyAlphabets(event);">
    </div>
  </body>
</html>

在上面的例子中，我们已经在输入文本框上定义了keydown 事件。因此，当用户在文本框中输入任何文本时，它就会调用allowOnlyAlphabets 函数。在allowOnlyAlphabets 函数中，我们根据字母的有效Unicode范围验证了事件对象的keyCode 属性的值。因此，如果用户按了一个有效的字母，allowOnlyAlphabets 函数会返回true ，否则会返回false 。最终的结果是，除了字母以外，用户将无法输入任何字符。

keyup 事件

在本节中，我们将看到keyup 事件是如何工作的。事实上，它的工作原理与keydown 事件非常相似，唯一不同的是，它是在松开键时触发的，而不是在按下键时触发。

让我们来看看下面的例子。

document.addEventListener('keydown', (event) => {
  var keyValue = event.key;
  var codeValue = event.code;

  console.log("keydown event, keyValue: " + keyValue);
  console.log("keydown event, codeValue: " + codeValue);

}, false);

document.addEventListener('keyup', (event) => {
  var keyValue = event.key;
  var codeValue = event.code;

  console.log("keyup event, keyValue: " + keyValue);
  console.log("keyup event, codeValue: " + codeValue);
}, false);

在上面的例子中，当你按下任何一个键时，它将首先触发keydown 事件，然后是keyup 事件。例如，如果你按下a键，你应该在控制台看到以下输出。注意触发事件的顺序是很重要的。

keydown event, keyValue: a
keydown event, codeValue: KeyA
keyup event, keyValue: a
keyup event, codeValue: KeyA

让我们来看看下面的例子，它展示了你如何在你的项目中使用keyup 事件。

<script>
function getSearchResults(event, element) {
  if (element.value.length > 6) {
    var searchKeyword = element.value;
    // make an AJAX call to fetch search results for "searchKeyword"
  }
}
</script>
<html>
  <body>
    <div>
           <input type="text" onkeyup="return getSearchResults(event, this);">
    </div>
  </body>
</html>

在上面的例子中，我们已经在输入文本框上定义了onkeyup 事件。因此，当用户在文本框中输入任何文本时，会调用getSearchResults 函数。在getSearchResults 函数中，我们将进行AJAX调用以获取搜索关键词的搜索结果。这也被称为实时搜索，因为它将在不刷新整个页面的情况下即时显示搜索结果。

重要的KeyboardEvent 对象属性

在最后一节中，我将总结一下KeyboardEvent 对象的重要属性。事实上，我们已经在到目前为止讨论的例子中看到了几个最常用的属性，如key 和code 。还有一些其他的重要属性，我们将在本节中讨论。

  • **key**键盘事件：返回被按下的字符。例如，如果a 字符被按下，它将返回a 。
  • **code**:返回字符的物理按键代码。例如，如果a 字符被按下，它将返回KeyA 。
  • **keyCode**: 返回被按下的键的Unicode字符代码。
  • **ctrlKey**:告诉你在触发按键事件时Ctrl键是否被按下。
  • **altKey**:告诉你在触发按键事件时是否按下了Alt键。
  • **shiftKey**:告诉你在触发按键事件时是否按下了Shift键。
  • **metaKey**:告诉你在触发按键事件时是否按了Meta键。在大多数情况下，Meta键是键盘上Ctrl和Alt键之间的那个键。
  • **location**:返回键盘或设备上某个键的位置。

正如你所看到的，keyboardEvent 对象提供了各种属性，允许你检测不同的键。在大多数情况下，你将使用keydown 事件来检测被按下的按键并执行相应的操作。而正如我们前面讨论的，你不应该使用keypress 事件，因为它迟早会被废弃。

总结

今天，我们讨论了如何在JavaScript中使用键盘事件，以及一些实际的例子。

avatar
文章
阅读
粉丝