Jak wykryć klawisz Tab w JavaScript?

Często spotykamy strony internetowe lub strony internetowe zawierające element rozróżniający wielkość liter. Co więcej, niektóre strony internetowe nie pozwalają na wprowadzanie danych tak długo, jak wciśnięty jest określony klawisz, np. Caps Lock, zwłaszcza w przypadku haseł. W takich przypadkach wykrycie klawisza tabulatora w JavaScript staje się bardzo pomocne do wcześniejszego ostrzegania użytkownika o wprowadzonych danych.

Ten artykuł poprowadzi Cię do wykrywania klawisza tabulatora w JavaScript.

Jak wykryć klawisz Tab w JavaScript?

Aby wykryć klawisz tabulacji w JavaScript, zastosuj następujące techniki:

“ zapytanieSelector() ' Metoda
“ pobierzElementbyId() ' Metoda

Wspomniane podejścia będą demonstrowane jeden po drugim!

Metoda 1: Wykryj klawisz Tab w JavaScript za pomocą metody document.querySelector()

„ document.querySelector() Metoda ” uzyskuje dostęp do pierwszego elementu pasującego do selektora CSS, a następnie metoda addEventListener() dodaje procedurę obsługi zdarzeń do elementu, do którego uzyskano dostęp. Metody te można zastosować w celu uzyskania dostępu do typu danych wejściowych i wykrycia, czy klawisz tabulatora jest naciśnięty, czy nie, gdy wprowadzana jest jego wartość.

Składnia

element. addEventListener ( wydarzenie , funkcjonować , użyjCapture )

W podanej składni „ wydarzenie ” odnosi się do nazwy wydarzenia, „ funkcjonować ” to konkretna funkcja do wykonania po wystąpieniu zdarzenia, a „ użyjCapture ” jest argumentem opcjonalnym.

dokument. selektor zapytań ( Selektory CSS )

W powyższej składni „ Selektory CSS ” odnoszą się do co najmniej jednego selektora CSS, który można określić w metodzie document.querySelector().

Przejrzyj poniższy przykład, aby lepiej zrozumieć podane pojęcie.

Przykład
Najpierw określ typ wejścia jako „ tekst ” z początkową wartością symbolu zastępczego i nagłówkiem w „ ” tag:

< Wejście rodzaj = 'tekst' symbol zastępczy = 'Wprowadź tekst' >
< h2 > Wynik < / h2 >

Następnie zastosuj „ document.querySelector() ” metoda dostępu do określonego wejścia i nagłówka odpowiednio i przechowywania ich w zmiennych o nazwie „ Wejście ' oraz ' wynik ”:

pozwól wejść = dokument. selektor zapytań ( 'Wejście' ) ;
niech wynik = dokument. selektor zapytań ( 'h2' ) ;

Teraz dodaj „ klawisz ” zdarzenie z polem wejściowym za pomocą metody addEventListener(). To zdarzenie powiadomi użytkownika za każdym razem, gdy „ patka klawisz ” jest wciśnięty w polu wprowadzania poprzez zastosowanie następującego warunku za pomocą przycisku „ tekst wewnętrzny ' własność:

Wejście. addEventListener ( 'wciśnięcie' , ( oraz ) => {
jeśli ( oraz. klucz === 'Patka' ) {
wynik. tekst wewnętrzny = „Naciśnięty klawisz Tab” ;
} w przeciwnym razie {
wynik. tekst wewnętrzny = „Klawisz Tab nie został naciśnięty” ;
}

W takim przypadku, gdy użytkownik naciśnie klawisz tabulatora, dodany poinformuje o wykonanej akcji:

Metoda 2: Wykryj klawisz Tab w JavaScript za pomocą metody document.getElementbyId()

„ document.getElementById() ” metoda może być wykorzystana do uzyskania dostępu do określonego elementu HTML na podstawie jego identyfikatora. Tę metodę można zaimplementować w celu pobrania pola wejściowego i dodania zdarzenia, aby powiadomić użytkownika za każdym razem, gdy zostanie naciśnięty określony klawisz, taki jak klawisz tabulatora.

Składnia

dokument. getElementById ( elementy )

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

Przyjrzyjmy się następującemu przykładowi.

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

< Wejście rodzaj = 'tekst' ID = 'patka' symbol zastępczy = 'Wprowadź tekst' >

Teraz pobierz identyfikator pola wejściowego za pomocą „ document.getElementById() ' metoda.

let input= document.getElementById(„tab”);

Na koniec dodaj wydarzenie o nazwie „ klawisz ” w metodzie addEventListener(), która będzie ostrzegać użytkownika za każdym razem, gdy „ Patka klawisz ” jest wciśnięty:

Wejście. addEventListener ( 'wciśnięcie' , ( oraz ) => {
jeśli ( oraz. klucz === 'Patka' ) {
alarm ( „Naciśnięty klawisz Tab” ) ;
}
} ) ;

Wyjście

Omówiliśmy wszystkie najprostsze metody wykrywania klawisza tabulacji w JavaScript.

Wniosek

Aby wykryć klawisz tabulacji w JavaScript, użyj „ dodajOdbiornikZdarzeń() ” z „ document.querySelector() ” metoda uzyskania typu wejścia i zastosowania zdarzenia do wykrycia określonego klucza lub „ pobierzElementbyId() ” metoda pobierania pola wejściowego na podstawie jego identyfikatora i powiadamiania użytkownika o spełnieniu dodanego warunku. Ten blog zawiera informacje o wykrywaniu klawisza tabulatora w JavaScript.

Jak wykryć klawisz Tab w JavaScript?