在JavaScript中捕获和响应键盘事件

在JavaScript中捕获和响应键盘事件第1张

在本文中，我们将讨论如何在 javascript 中捕获和响应不同的键盘事件。我将向您展示几个真实世界的示例，以使其易于理解。
JavaScript 是 Web 的核心技术之一。大多数网站都使用它，所有现代网络浏览器都支持它，无需插件。在本系列中，我们将讨论有助于您进行日常 javaScript 开发的不同技巧和窍门。

作为一名 JavaScript 开发人员，有时您需要实现需要处理键盘事件并基于它们执行操作的功能。幸运的是，JavaScript 提供了一个内置Keyboardevent对象，它允许您处理不同类型的键盘事件。

JavaScript 中的键盘事件

在 JavaScript 中，该KeyboardEvent对象提供三个事件：key down、keypress 和 key up。

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

向下键
按键
上键

当您按下键盘上的任意键时，就会触发按键按下事件。并且如果长时间按下某个键，则重复触发按键按下事件。

keypress 事件主要在您按下任何可打印字符时触发，并且在 key down 事件之后触发。实际上，keypress 事件用于传递由 key down 事件产生的字符。大多数情况下，非字符键不会引发按键事件。虽然有些浏览器支持这个事件，但不建议依赖这个事件，因为它会从 web 标准中删除。

按键事件已被弃用，并将逐步退出现代浏览器。

最后，当释放一个键时会引发 key up 事件。基本上，按键按下和按键向上事件的组合为您提供了一个代码，该代码指示按下的键。

每个键盘事件都提供了两个重要的属性：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("你刚刚按下了 Ctrl + a/A!");
     }
  }}, false);

首先，ctrlKey是KeyboardEvent对象的一个特殊属性，它告诉您在触发事件时是否按下了Ctrl键。keydown因此，如果ctrlKey为真，则表示按下了Ctrl键。

接下来，我们检查了keyCode被按下的字符的值，如果是65或97，则表示a或A与Ctrl键一起被按下。该对象的keyCode属性KeyboardEvent返回所按下键的 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函数中，我们keyCode根据字母的有效 Unicode 范围验证了事件对象的属性值。因此，如果用户按下了一个有效的字母字符，则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 调用以获取搜索关键字的搜索结果。这也称为实时搜索，因为它会立即显示搜索结果而无需刷新整个页面。