Dieser Artikel führt Sie zum Erkennen der Tabulatortaste in JavaScript.
Wie erkennt man die Tabulatortaste in JavaScript?
Wenden Sie die folgenden Techniken an, um die Tabulatortaste in JavaScript zu erkennen:
- „ querySelector() ' Methode
- „ getElementbyId() ' Methode
Die genannten Ansätze werden nacheinander demonstriert!
Methode 1: Tabulatortaste in JavaScript mithilfe der Methode document.querySelector() erkennen
Das ' document.querySelector() ” greift auf das erste Element zu, das mit einem CSS-Selektor übereinstimmt, und dann fügt die Methode addEventListener() dem Element, auf das zugegriffen wird, einen Ereignishandler hinzu. Diese Methoden können angewendet werden, um auf den Eingabetyp zuzugreifen und zu erkennen, ob die Tabulatortaste gedrückt wird oder nicht, wenn ihr Wert eingegeben wird.
Syntax
Element. addEventListener ( Veranstaltung , Funktion , useCapture )
In der gegebenen Syntax „ Veranstaltung “ bezieht sich auf den Veranstaltungsnamen, „ Funktion “ ist die spezifische Funktion, die ausgeführt werden soll, wenn das Ereignis eintritt, und „ useCapture ” ist das optionale Argument.
dokumentieren. querySelector ( CSS-Selektoren )In der obigen Syntax „ CSS-Selektoren ” beziehen sich auf einen oder mehrere CSS-Selektoren, die in der Methode document.querySelector() angegeben werden können.
Gehen Sie das folgende Beispiel durch, um das genannte Konzept besser zu verstehen.
Beispiel
Geben Sie zunächst den Eingabetyp als „ Text “ mit einem anfänglichen Platzhalterwert und einer Überschrift im „
< h2 > Ergebnis < / h2 >
Wenden Sie als Nächstes das „ document.querySelector() ” Methode für den Zugriff auf die angegebene Eingabe bzw. die Überschrift und speichern sie in den Variablen mit dem Namen “ Eingang ' und ' Ergebnis “:
eingeben lassen = dokumentieren. querySelector ( 'Eingang' ) ;Ergebnis lassen = dokumentieren. querySelector ( 'h2' ) ;
Fügen Sie nun das „ Taste nach unten ”-Ereignis mit dem Eingabefeld mithilfe der Methode addEventListener(). Dieses Ereignis benachrichtigt den Benutzer immer dann, wenn „ Tab ” wird im Eingabefeld gedrückt, indem die folgende Bedingung mit Hilfe der ” innerText ' Eigentum:
Eingang. addEventListener ( 'Taste nach unten' , ( und ) => {wenn ( und. Schlüssel === 'Tab' ) {
Ergebnis. innerText = 'Tab-Taste gedrückt' ;
} anders {
Ergebnis. innerText = 'Tab-Taste nicht gedrückt' ;
}
Wenn der Benutzer in diesem Fall die Tabulatortaste drückt, benachrichtigt der hinzugefügte Benutzer über die durchgeführte Aktion:
Methode 2: Tabulatortaste in JavaScript mithilfe der Methode document.getElementbyId() erkennen
Das ' document.getElementById() “-Methode kann verwendet werden, um auf ein bestimmtes HTML-Element basierend auf seiner ID zuzugreifen. Diese Methode kann implementiert werden, um das Eingabefeld abzurufen und ein Ereignis hinzuzufügen, um den Benutzer zu benachrichtigen, wenn eine bestimmte Taste gedrückt wird, z. B. die Tabulatortaste.
Syntax
dokumentieren. getElementById ( Elemente )In der gegebenen Syntax „ Elemente “ bezieht sich auf die ID eines bestimmten Elements.
Sehen wir uns das folgende Beispiel an.
Beispiel
Fügen Sie im folgenden Beispiel einen Eingabetyp und einen Platzhalterwert ein, wie in der vorherigen Methode beschrieben:
Rufen Sie nun die Eingabefeld-ID mit dem „ document.getElementById() ' Methode.
let input= document.getElementById('tab');
Fügen Sie abschließend ein Ereignis mit dem Namen „ Taste nach unten “ in der Methode addEventListener(), die den Benutzer benachrichtigt, wenn „ Tab ” Taste gedrückt wird:
Eingang. addEventListener ( 'Taste nach unten' , ( und ) => {wenn ( und. Schlüssel === 'Tab' ) {
Alarm ( 'Tab-Taste gedrückt' ) ;
}
} ) ;
Ausgabe
Wir haben die einfachsten Methoden zum Erkennen der Tabulatortaste in JavaScript besprochen.
Fazit
Um die Tabulatortaste in JavaScript zu erkennen, verwenden Sie die „ addEventListener() ' mit dem ' document.querySelector() ”-Methode zum Abrufen des Eingabetyps und Anwenden eines Ereignisses zum Erkennen des angegebenen Schlüssels oder der “ getElementbyId() ”-Methode zum Abrufen des Eingabefelds basierend auf seiner ID und zum Benachrichtigen des Benutzers, wenn die hinzugefügte Bedingung erfüllt ist. Dieser Blog führte zum Erkennen der Tabulatortaste in JavaScript.