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

Alex Dulcianu 2022年5月1日
在 JavaScript 中检测和处理 Tab 键的按下情况

JavaScript 具有检测键盘按键的内置方法以及处理这些事件的多种方法。你可以在整个代码中设置事件侦听器,这是确保所需事件仅在选择正确元素时发生的好方法。

也就是说,特定的键盘键在大多数浏览器中具有预定的功能——实际上在大多数操作系统上也是如此。例如,在大多数浏览器中使用 F1 会打开一个帮助页面,而 F5 键会刷新当前页面。

Tab 键也是如此,它用于在大多数浏览器中循环浏览超链接和文本框。但是,你仍然可以使用 JavaScript 检测此事件并在按下 Tab 键时执行特定操作。例如,你可能想要对选定的超链接做一些事情,甚至在用户使用 Tab 切换到它时更改文本输入的属性。

以下是如何为 Tab 键添加事件侦听器的示例:

JavaScript 中创建一个事件侦听器以检测何时按下 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 代码有两个工作部分:

  1. document.addEventListener() 方法有两个参数:你要侦听的事件类型(在本例中为 keyup 事件),以及你要在事件发生时执行的函数触发。
  2. 我们自定义的 detectTabKey() 函数检查事件的键码是否与 Tab 键的键码相同。如果匹配,则将超链接打印到控制台。

添加更多逻辑以确保只有 <a> 元素触发事件侦听器

你们中的一些人可能已经发现了之前方法的一个问题:如果我们的网页有输入文本框会发生什么?如果是这种情况,按下 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() 方法以确保我们不会错过任何元素。

相关文章 - JavaScript Event