网站开发人员希望读者以某种方式与他们的网站进行交互。访问者可以上下滚动页面、在输入字段中写入内容、单击链接访问另一个页面,或者按组合键触发特定行为。作为开发人员,您应该能够捕获所有这些事件并向用户提供所需的功能。
在本教程中,我们的重点将是在 JavaScript 中处理键盘事件。我们将了解不同类型的键盘事件、处理特殊按键事件以及获取有关按下或释放的按键的信息。
键盘事件分为三种类型。这些称为 keydown
、keypress
和 keyup
。
只要按下某个键,就会触发 keydown
事件。所有键都会被触发。它们是否产生角色价值并不重要。例如,按键盘上的 A 或 Alt 键将触发 keydown
事件。
keypress
事件已弃用。它仅在按下产生字符值的键时触发。例如,按 A 键将触发此事件,但按 Alt 键则不会。您应该考虑使用 keydown
事件来代替它。
当用户按下的键被释放时,将触发 keyup
事件。
假设用户连续按下键盘上的任意键。在这种情况下,keydown
事件将被重复触发。一旦用户释放密钥,就会触发 keydown
事件将被重复触发。一旦用户释放密钥,就会触发 keyup
事件。
此时,我想提一些相当明显的事情。键盘是一种输入设备,用于从用户那里获取一些输入。我们根据该输入采取行动。但是,用户还有其他方式发送输入。
如果您想跟踪用户在表单中填写的任何输入字段,那么在所述输入上使用其他事件(例如 change
)更有意义。
此外,键盘事件仅为可以接收焦点的元素生成。这包括 <input>
元素、<textarea></textarea>
元素、<summary></summary>
元素以及具有 contentEditable
或 tabindex
属性的其他元素。
例如,除非设置 tabindex
或 contentEditable
属性,否则您将无法侦听段落元素上的键盘事件。但是,它最终会在 DOM 树中冒泡,因此您仍然可以将 keydown
或 tabindex
或 contentEditable
属性,否则您将无法侦听段落元素上的键盘事件。但是,它最终会在 DOM 树中冒泡,因此您仍然可以将 keydown
或 keyup
事件侦听器附加到文档。
这是一个例子:
document.addEventListener("keydown", keyIsDown); function keyIsDown(event) { // Do whatever you want! }
您还可以将回调作为箭头函数提供:
document.addEventListener("keydown", (event) => { // Do whatever you want! });
在上一节的基本代码片段中,我们定义了一个回调函数。该函数接受 event
对象作为其参数。此 event
对象包含您可能需要访问的与 keydown
或 event
对象作为其参数。此 event
对象包含您可能需要访问的与 keydown
或 keyup
事件相关的所有信息。
以下是您应该了解的一些有用属性:
key
:该属性返回一个字符串,表示所按键的字符值。code
:此属性返回一个字符串,表示按下的物理键的代码。repeat
repeat
:如果长时间按住某个键,该属性将返回布尔值 true
,导致 keydown
:如果长时间按住某个键,该属性将返回布尔值 true
,导致 keydown
事件多次触发。altKey
altKey
:如果用户按下 Alt 键(在 Windows 上)或 Option 键(在在 macOS 上)当 keydown
:如果用户按下 ctrlKey
:如果用户在 keydown
事件触发时按下 Control 键,则此属性返回布尔值 true
键(在在 macOS 上)当 keydown
事件触发时。ctrlKey
metaKey
:如果用户在 keydown
事件触发时按下 Meta 键,则此属性返回布尔值 true
:如果用户在 keydown
事件触发时按下 true
。
shiftKey
:如果用户在 keydown
事件触发时按下 Shift 键,则此属性返回布尔值 true
metaKey
keydown
事件触发时按下 Metakeydown
事件被触发时”部分。这意味着,如果在执行上述任一操作时按下 A 或 3 等键,这些属性的值将为 true
,用于 keydown
键,则此属性返回布尔值 true
。
shiftKey
🎜:如果用户在 keydown
事件触发时按下 🎜Shift🎜 键,则此属性返回布尔值 true
。🎜
🎜
🎜您会注意到,我在所有最后四个属性描述中都包含了“当 keydown
事件被触发时”部分。这意味着,如果在执行上述任一操作时按下 🎜A🎜 或 🎜3🎜 等键,这些属性的值将为 true
,用于 keydown
事件。键也处于按下状态。🎜
🎜重点关注以下 CodePen 演示后,尝试按单个键或组合键,以查看不同属性的值发生变化。🎜
如果您按键盘顶部的 3 键而不按 Shift 键,则 key
属性的值将变为 3 > 并且 code
属性的值变为 Digit3。但是,按下 Shift 后,key
属性的值将变为 #,而 code
属性仍为 Digit3。
您可以尝试使用其他组合键进行相同的操作,您会注意到 key
属性的值会根据您按下的键而变化。但是,code
属性的值保持不变。
键盘上的某些键通常是重复的。例如,有两个 Shift 键。按左键会将 code
的值设置为 ShiftLeft
。按右边会将 code
的值设置为 ShiftRight
。同样,有两组数字键。字母上方的代码将为您提供 Digit<number></number>
代码,而数字键盘上的代码将为您提供 Numpad<number></number>
代码。
这意味着,如果您的代码依赖于检测特定键,则务必确保您使用 code
属性来检查按下了哪个键。
我想提的另一件重要的事情是,并不是每个人都使用 QWERTY 键盘,而且他们的键盘甚至可能不是英文的。在这种情况下,使用 key
属性来检查按下了哪个键很容易出错。
现在我们知道了如何监听键盘事件并从中提取信息,我们可以编写一些代码来对某些特定键的 keydown
和 keyup
事件做出反应。考虑以下代码片段:
const circle = document.querySelector(".circle"); document.addEventListener("keydown", (event) => { if (event.code == "KeyR" && event.repeat != true) { let rVal = Math.floor(200 + Math.random() * 200); circle.setAttribute("style", `width: ${rVal}px; height: ${rVal}px;`); } if (event.key == "B" && event.shiftKey == true) { let rVal = Math.floor(10 + Math.random() * 40); circle.setAttribute("style", `border: ${rVal}px solid orangered;`); } if (event.code == "ArrowUp" && event.repeat != true) { circle.classList.add("animate__animated", "animate__bounce"); } }); document.addEventListener("keyup", (event) => { if (event.code == "ArrowUp") { setTimeout(() => { circle.classList.remove("animate__animated", "animate__bounce"); }, 4000); } });
我们为 keydown
事件创建了一个侦听器,并为 keyup
事件创建了另一个侦听器。这两个事件都附加到 document
。
在 keydown
内,我们检查三个不同的密钥。我使用了 R 键的 event.code
属性来向您展示您可以单独按 R 键或与任何修饰键组合使用,并且它仍会将圆的半径更改为随机值。另一方面,我们使用 event.key
属性来检查其值是否为 B。仅当您同时按 Shift 和 B 时,此块中的代码才会执行,因为这种组合会导致 event.key
属性成为大写“B”。
在 keyup
内,我们检查 ArrowUp
键上的 keyup
事件。一旦钥匙被解除,我们会在四秒的延迟后删除之前附加的类。
以下 CodePen 演示展示了这一切的实际效果:
您应该尝试在上述代码中添加自己的逻辑,以便当用户按下A、S、W键时圆圈会移动> 和D。
在本教程中,我们学习了 JavaScript 中键盘事件的基础知识。按下并释放键盘上的按键将分别触发 keydown
和 keyup
事件。与这些事件关联的 event
对象包含您确定按下了哪个键并采取适当操作所需的所有信息。
请记住,键盘只是众多可能的输入设备之一。因此,使用键盘检测任何输入可能并不总是能达到预期效果。在这种情况下,您应该考虑使用与输入相关的事件。
以上是JavaScript:掌握键盘事件处理的详细内容。更多信息请关注PHP中文网其他相关文章!