Jak wykryć klawisz TAB w JavaScript

Często spotykamy witryny lub strony internetowe, które obejmują element wrażliwy na sprawę. Ponadto niektóre strony internetowe nie pozwalają na wprowadzanie danych tak długo, jak naciśnięty jest konkretny klawisz, taki jak blokada czapek, szczególnie w przypadku haseł. W takich przypadkach wykrywanie klawisza zakładki w JavaScript staje się bardzo pomocne w wcześniejszym ostrzeganiu użytkownika wprowadzonych danych.

Ten zapis poprowadzi Cię do wykrycia klawisza zakładki w JavaScript.

Jak wykryć klawisz TAB w JavaScript?

Aby wykryć klucz TAB w JavaScript, zastosuj następujące techniki:

• "QuerySelelect ()" Metoda
• "getElementById ()" Metoda

Wspomniane podejścia zostaną wykazane jeden po drugim!

Metoda 1: Wykryj klawisz karty w JavaScript za pomocą dokumentu.Metoda QuerySelector ()

„„dokument.QuerySelelect ()”Metoda uzyskuje dostęp do pierwszego elementu pasującego do selektora CSS, a następnie metoda addEventListener () dodaje obsługę zdarzeń do dostępnego elementu. Metody te można zastosować, aby uzyskać dostęp do typu wejściowego i wykryć, czy klawisz TAB jest naciśnięty, czy nie, gdy jego wartość jest wprowadzana.

Składnia

element.addEventListener (zdarzenie, funkcja, usecapture)

W podanej składni „wydarzenie„Odnosi się do nazwy wydarzenia”funkcjonować”Jest konkretną funkcją do wykonania, gdy zdarzenie nastąpi, i„Usecorture”To opcjonalny argument.

dokument.querySelelector (selektory CSS)

W powyższej składni „Selektory CSS”Patrz jeden lub więcej selektorów CSS, które można określić w dokumencie.Metoda QuerySelector ().

Przejrzyj następujący przykład, aby lepiej zrozumieć określoną koncepcję.

Przykład
Najpierw podaj typ wejściowy jako „tekst”Z początkową wartością zastępczą i nagłówkiem w„”Tag:

Wynik

Następnie zastosuj „dokument.QuerySelelect ()”Metoda dostępu odpowiednio do określonego wejścia i nagłówka i przechowywania ich w zmiennych o nazwie„wejście" I "wynik”:

Let Input = Dokument.QuerySelelect („Wprowadzenie”);
niech wynik = dokument.QuerySelelect („H2”);

Teraz dodaj „Keydown”Zdarzenie z polem wejściowym za pomocą metody addEventListener (). To wydarzenie powiadomi użytkownika za każdym razem, gdy „patka„Klawisz jest wciśnięty w polu wejściowym poprzez zastosowanie następującego warunku za pomocą„Innertext" nieruchomość:

wejście.addEventListener („keydown”, (e) =>
if (e.key === "tab")
wynik.innerText = "tab klawisz naciśnięty";
w przeciwnym razie
wynik.innerText = "tab klawisz nie naciśnięty";

W takim przypadku, gdy użytkownik naciśnie klawisz TAB, dodane powiadomi o wykonanej akcji:

Metoda 2: Wykryj klawisz karty w JavaScript za pomocą dokumentu.metoda getelementById ()

„„dokument.getElementById ()„Metoda można wykorzystać do dostępu do konkretnego elementu HTML na podstawie jego identyfikatora. Tę metodę można zaimplementować, aby uzyskać pole wejściowe i dodać zdarzenie, aby ostrzegać użytkownika, gdy naciśnięty jest konkretny klawisz, na przykład klawisz TAB.

Składnia

dokument.getElementById (elementId)

W podanej składni „ElementId”Odnosi się do identyfikatora określonego elementu.

Przeglądmy następujący przykład.

Przykład
W poniższym przykładzie uwzględnij typ wejściowy i wartość symboliczną zastępczą, jak omówiono w poprzedniej metodzie:

Teraz pobieraj identyfikator pola wejściowego za pomocą „dokument.getElementById ()" metoda.

Let Input = Dokument.getElementById („tab”);

Na koniec dodaj wydarzenie o nazwie „Keydown”W metodzie addEventListener (), która ostrzega użytkownika za każdym razem, gdy„Patka„Klawisz jest naciskany:

wejście.addEventListener („keydown”, (e) =>
if (e.key === "tab")
alert („naciśnięty klawisz”);

);

Wyjście

Omówiliśmy wszystkie najprostsze metody wykrywania klucza karty w JavaScript.

Wniosek

Aby wykryć klawisz TAB w JavaScript, użyj „addEventListener ()”Z„dokument.QuerySelelect ()”Metoda uzyskania typu wejściowego i zastosowania zdarzenia do wykrywania określonego klucza lub„getElementById ()”Metoda pobierania pola wejściowego na podstawie jego identyfikatora i powiadamiania użytkownika za każdym razem, gdy spełniony jest dodany warunek. Ten blog kierował się wykrywaniem klucza Tab w JavaScript.