迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > JavaScript >

在 JavaScript 中检测和处理 Tab 键的按下情况

作者:迹忆客 最近更新:2023/03/10 浏览次数:

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() 方法以确保我们不会错过任何元素。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

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 选择器的不同方法。你还将找到许多有用的

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便