在 JavaScript 中检测和处理 Tab 键的按下情况
JavaScript 具有检测键盘按键的内置方法以及处理这些事件的多种方法。你可以在整个代码中设置事件侦听器,这是确保所需事件仅在选择正确元素时发生的好方法。
也就是说,特定的键盘键在大多数浏览器中具有预定的功能——实际上在大多数操作系统上也是如此。例如,在大多数浏览器中使用 F1 会打开一个帮助页面,而 F5 键会刷新当前页面。
Tab
键也是如此,它用于在大多数浏览器中循环浏览超链接和文本框。但是,你仍然可以使用 JavaScript 检测此事件并在按下 Tab
键时执行特定操作。例如,你可能想要对选定的超链接做一些事情,甚至在用户使用 Tab
切换到它时更改文本输入的属性。
以下是如何为 Tab
键添加事件侦听器的示例:
<a href="https://www.delftstack.com/">Test Link 1</a>
<a href="https://www.delftstack.com/contact/">Test Link 2</a>
<a href="https://www.delftstack.com/about-us/">Test Link 3</a>
document.addEventListener("keyup", detectTabKey);
function detectTabKey(e) {
if (e.keyCode == 9) {
activeElem = document.activeElement;
console.log(activeElem.href);
}
}
输出:
"https://www.delftstack.com/"
"https://www.delftstack.com/contact/"
"https://www.delftstack.com/about-us/"
上面的 JavaScript 代码有两个工作部分:
你们中的一些人可能已经发现了之前方法的一个问题:如果我们的网页有输入文本框会发生什么?如果是这种情况,按下 Tab
键也将在它们之间循环,并且由于它们没有 href
属性,我们的功能将无法按预期工作。
值得庆幸的是,如果是这种情况,JavaScript 不会抛出错误,但无论何时选择文本输入,它都会打印出 undefined
。为了确保不会发生这种情况,我们需要在 detectTabKey()
函数中添加一个步骤。
让我们在 HTML 代码中添加一个新元素:
<a href="https://www.delftstack.com/">Test Link 1</a>
<a href="https://www.delftstack.com/contact/">Test Link 2</a>
<a href="https://www.delftstack.com/about-us/">Test Link 3</a>
<input type="text" placeholder="Text Box">
如果我们保持与以前相同的 JavaScript 代码,输出将如下所示:
输出:
"https://www.delftstack.com/"
"https://www.delftstack.com/contact/"
"https://www.delftstack.com/about-us/"
undefined
为了解决这个问题,我们需要在我们的 detectTabKey()
函数中添加另一个 if
语句。这是最终代码:
document.addEventListener("keyup", detectTabKey);
function detectTabKey(e) {
if (e.keyCode == 9) {
activeElem = document.activeElement;
if (activeElem.tagName.toLowerCase() == "a") {
console.log(activeElem.href);
}
}
}
输出:
"https://www.delftstack.com/"
"https://www.delftstack.com/contact/"
"https://www.delftstack.com/about-us/"
文本框即使被选为活动元素也不会触发我们的函数,因为它不满足新条件。因此,如果当前活动元素附加了 a
标签,代码只会打印出 href
属性。我们还添加了 .toLowerCase()
方法以确保我们不会错过任何元素。
相关文章
Do you understand JavaScript closures?
发布时间:2025/02/21 浏览次数:108 分类:JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间:2025/02/21 浏览次数:178 分类:JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间:2025/02/21 浏览次数:150 分类:JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
用 jQuery 检查复选框是否被选中
发布时间:2024/03/24 浏览次数:102 分类:JavaScript
-
在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间:2024/03/24 浏览次数:180 分类:JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。