在 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