JavaScript:捕获键盘事件并做出反应。

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

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

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

键盘事件在JavaScript中，KeyboardEvent对象提供三个事件:按键、按键和按键反弹。

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

按键按键当键盘上的任何按键被按下时，按键事件将被触发。并且如果长时间按下某个键，将会重复触发按键事件。

按键事件主要在按下任何可打印字符时触发，并且在按键事件之后触发。事实上，关键事件用于中继关键事件生成的字符。在大多数情况下，非字符键不会导致按键事件。尽管某些浏览器支持此事件，但不建议依赖此事件，因为它将从网络标准中删除。

击键事件已被弃用，并将在现代浏览器中逐步淘汰。最后，释放按键时会触发按键事件。基本上，按键和按键事件的组合为您提供了一个指示按键被按下的代码。

每个键盘事件都提供两个重要属性:key和code。按键属性由按下的字符填充，而代码属性由字符的物理按键位置填充。例如，如果按下A字符键，则key属性将填充为，code属性将填充为KeyA常量。但是，按下的键码不一定与字符相同！如果用户设置了备用键盘布局，例如Dvorak，按下相同的键码将产生不同的字符。

以上是JavaScript中键盘事件的简要概述。从下一节开始，我们将讨论这些事件和真实世界的例子，以了解它们是如何工作的。

在本节中，我们将了解JavaScript中的Keydown事件是如何工作的。按下键盘上的任何键都会触发Keydown事件。

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

document . addevent listener（‘keydown‘，（event）=》{ var key value = event . key；var codeValue = event.codeconsole . log（“key value:“+key value”；console.log（“代码值:“+代码值“）；}，假)；如您所见，我们创建了一个侦听器来侦听keydown事件。每当按下任何键时，都会调用我们的侦听器，并将该键的值和代码记录到控制台。继续运行它，看看它如何工作。

让我们看一下下面的例子，它演示了如何检测用户是按下了ctrl+a还是CTRL+A..

document . addevent listener（‘keydown‘，（event）=》{ if（event . Ctrl key）{ if（event . key code = = 65 | | event . key code = = 97）{ console . log（“您刚刚按了Ctrl + a/A！“);} }}，false）；首先，ctrlKey是KeyboardEvent对象的一个特殊属性，它告诉您在触发keydown事件时是否按下了Ctrl键。因此，如果CtrlKey为true，则意味着ctrl键已被按下。

接下来，我们检查按下的字符的键码值。如果是65或97，则表示A或A与Ctrl键一起按下。KeyboardEvent对象的keyCode属性返回所按按键的Unicode字符代码。同样，您也可以使用KeyboardEvent对象的shiftKey属性，该属性告诉您在按下Key事件时是否按下了Shift键。扳机。

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

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

在本节中，我们将了解Keyup事件是如何工作的。事实上，它的工作原理与keydown事件非常相似，唯一的区别是它是在释放键时触发的，而不是在按下键时触发的。

让我们看看下面的例子。

document . addevent listener（‘keydown‘，（event）=》{ var key value = event . key；var codeValue = event.codeconsole . log（“keydown事件，key value:“+key value“）；console . log（“keydown事件，code value:“+code value“）；}，假)；document . addevent listener（‘keyup‘，（event）=》{ var key value = event . key；var codeValue = event.codeconsole . log（“keyup事件，key value:“+key value“）；console . log（“keyup事件，code value:“+code value“）；}，假)；在上面的示例中，当您按下任何键时，将首先触发keydown事件，然后触发keyup事件。例如，如果您按下A键，您应该会在控制台上看到以下输出。请注意事件的触发顺序。

Keydown事件，键值:一个keydown事件，代码值:keya keyup事件，键值:一个keyup事件，代码值:keya让我们看看下面的示例，该示例演示了如何在项目中使用keyup事件。

在上面的示例中，我们在输入文本框上定义了onkeyup事件。因此，当用户在文本框中输入任何文本时，它将调用getSearchResults函数。在getSearchResults函数中，我们将进行AJAX调用来获取搜索关键字的搜索结果。这也称为实时搜索，因为它无需刷新整个页面即可立即显示搜索结果。

重要的KeyboardEvent对象属性在最后一节中，我将总结KeyboardEvent对象的重要属性。事实上，我们已经在迄今为止讨论的示例中看到了一些常见的属性，例如key和code。在本节中，我们还将讨论其他一些重要的属性。

键:返回按下的字符。例如，如果您按下A字符，将返回。Code:返回角色的物理键码。例如，如果您按下A字符，将返回KeyA。KeyCode:返回所按按键的Unicode字符代码。CtrlKey:告诉您当按键事件被触发时是否按下Ctrl键。AltKey:告诉您当按键事件被触发时是否按下了alt键。ShiftKey:告诉您当按键事件被触发时是否按下shift键。MetaKey:告诉您当按键事件被触发时是否按下了meta键。在大多数情况下，Meta键是键盘上Ctrl键和Alt键之间的键。Location:返回键盘或设备上按键的位置。如您所见，keyboardEvent对象提供了各种允许您检测不同按键的属性。在大多数情况下，您将使用keydown事件来检测按下的键并采取相应的操作。正如我们之前讨论的那样，您不应该使用keypress事件，因为它迟早会被丢弃。

结语今天，我们讨论了如何在JavaScript中使用键盘事件以及几个实际例子。

以上是JavaScript的细节:捕获键盘事件并响应。更多内容请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 暂无相关推荐文章

本文由主机参考刊发，转载请注明：JavaScript:捕获键盘事件并做出反应。 https://zhujicankao.com/104044.html