Erkennt und verarbeitet Tab-Tastendrücke in JavaScript

JavaScript verfügt über eine integrierte Methode zur Erkennung von Tastatureingaben und mehrere Möglichkeiten zur Behandlung dieser Ereignisse. Sie können Ereignis-Listener in Ihrem gesamten Code einrichten, was eine großartige Möglichkeit ist, um sicherzustellen, dass die gewünschten Ereignisse nur dann eintreten, wenn die richtigen Elemente ausgewählt sind.

Allerdings haben bestimmte Tastaturtasten in den meisten Browsern - und in der Tat auf den meisten Betriebssystemen - vorgegebene Funktionen. Beispielsweise öffnet die Verwendung von F1 in den meisten Browsern eine Hilfeseite, und die Taste F5 aktualisiert die aktuelle Seite.

Dasselbe gilt für die Tab-Taste, die in den meisten Browsern zum Durchlaufen von Hyperlinks und Textfeldern verwendet wird. Sie können dieses Ereignis jedoch weiterhin mit JavaScript erkennen und bestimmte Aktionen ausführen, wenn die Taste Tab gedrückt wird. Beispielsweise möchten Sie etwas mit dem ausgewählten Hyperlink machen oder sogar die Eigenschaften der Texteingabe ändern, wenn ein Benutzer mit Tab dorthin wechselt.

Hier ist ein Beispiel, wie Sie einen Ereignis-Listener für die Tab-Taste hinzufügen können:

Erstellen Sie einen Ereignis-Listener, um zu erkennen, wenn die Tab-Taste in JavaScript gedrückt wird

<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);
  }
}

Ausgabe:

"https://www.delftstack.com/"
"https://www.delftstack.com/contact/"
"https://www.delftstack.com/about-us/"

Der obige JavaScript-Code hat zwei funktionierende Teile:

1. Die Methode document.addEventListener() nimmt zwei Argumente entgegen: die Art des Ereignisses, auf das Sie lauschen möchten (in diesem Fall ist es das keyup-Ereignis) und die Funktion, die Sie ausführen möchten, wenn das Ereignis eintrifft Ausgelöst.
2. Unsere benutzerdefinierte Funktion detectTabKey() prüft, ob der Tastencode für das Ereignis derselbe ist wie der für die Tab-Taste. Wenn es sich um eine Übereinstimmung handelt, drucken Sie den Hyperlink zur Konsole aus.

Weitere Logik hinzufügen, um sicherzustellen, dass nur <a>-Elemente den Ereignis-Listener auslösen

Einige von Ihnen haben vielleicht schon ein Problem mit der vorherigen Methode entdeckt: Was passiert, wenn unsere Webseite Eingabetextfelder hat? Wenn dies der Fall ist, werden sie durch Drücken der Taste Tab ebenfalls durchlaufen, und da sie kein href-Attribut haben, funktioniert unsere Funktion nicht wie beabsichtigt.

Zum Glück wirft JavaScript in diesem Fall keinen Fehler, aber es gibt undefined aus, wenn eine Texteingabe ausgewählt wird. Um sicherzustellen, dass dies nicht passiert, müssen wir unserer Funktion detectTabKey() einen Schritt hinzufügen.

Fügen wir unserem HTML-Code ein neues Element hinzu:

<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">

Wenn wir den gleichen JavaScript-Code wie zuvor beibehalten, sieht die Ausgabe so aus:

Ausgabe:

"https://www.delftstack.com/"
"https://www.delftstack.com/contact/"
"https://www.delftstack.com/about-us/"
undefined

Um dies zu beheben, müssen wir unserer Funktion detectTabKey() eine weitere if-Anweisung hinzufügen. Hier ist der endgültige Code:

document.addEventListener('keyup', detectTabKey);

function detectTabKey(e) {
  if (e.keyCode == 9) {
    activeElem = document.activeElement;
    if (activeElem.tagName.toLowerCase() == 'a') {
      console.log(activeElem.href);
    }
  }
}

Ausgabe:

"https://www.delftstack.com/"
"https://www.delftstack.com/contact/"
"https://www.delftstack.com/about-us/"

Das Textfeld löst unsere Funktion auch dann nicht aus, wenn es als aktives Element ausgewählt ist, da es die neue Bedingung nicht erfüllt. Daher druckt der Code das Attribut href nur dann aus, wenn das aktuell aktive Element mit dem a-Tag versehen ist. Wir haben auch die Methode .toLowerCase() hinzugefügt, um sicherzustellen, dass wir kein Element übersehen.