Kako otkriti tipku Tab u JavaScriptu

Često nailazimo na web stranice ili web stranice koje sadrže element koji razlikuje velika i mala slova. Štoviše, neke web stranice ne dopuštaju unos podataka sve dok je pritisnuta određena tipka, kao što je caps lock, posebno u slučaju lozinki. U takvim slučajevima otkrivanje tipke tab u JavaScriptu postaje vrlo korisno za prethodno upozorenje korisnika o unesenim podacima.

Ovaj zapis će vas voditi kako otkriti tipku tab u JavaScriptu.

Kako otkriti tipku Tab u JavaScriptu?

Da biste otkrili tipku tab u JavaScriptu, primijenite sljedeće tehnike:

“ querySelector() ” Metoda
“ getElementbyId() ” Metoda

Navedeni pristupi će se demonstrirati jedan po jedan!

Metoda 1: Otkrivanje ključa kartice u JavaScriptu pomoću metode document.querySelector().

' document.querySelector() ” metoda pristupa prvom elementu koji odgovara CSS selektoru, a zatim metoda addEventListener() dodaje rukovatelj događajima elementu kojem se pristupa. Ove se metode mogu primijeniti za pristup vrsti unosa i otkrivanje je li tipka tabulator pritisnuta ili ne kada se unosi njezina vrijednost.

Sintaksa

element. addEventListener ( događaj , funkcija , useCapture )

U navedenoj sintaksi, ' događaj ” odnosi se na naziv događaja, “ funkcija ” je specifična funkcija koja se izvršava kada se događaj dogodi, i “ useCapture ” je izborni argument.

dokument. querySelector ( CSS selektori )

U gornjoj sintaksi, ' CSS selektori ” odnosi se na jedan ili više CSS selektora koji se mogu navesti u metodi document.querySelector().

Prođite kroz sljedeći primjer za bolje razumijevanje navedenog koncepta.

Primjer
Prvo odredite vrstu unosa kao ' tekst ' s početnom vrijednošću rezerviranog mjesta i naslovom u ' ” oznaka:

< ulazni tip = 'tekst' rezerviranog mjesta = 'Unesi tekst' >
< h2 > Proizlaziti < / h2 >

Zatim primijenite ' document.querySelector() ” metoda za pristup navedenom unosu odnosno naslovu i pohranjuju ih u varijablama pod nazivom “ ulazni ' i ' proizlaziti ”:

dopustiti unos = dokument. querySelector ( 'ulazni' ) ;
neka rezultat = dokument. querySelector ( 'h2' ) ;

Sada dodajte ' spuštanje tipke ” s poljem za unos pomoću metode addEventListener(). Ovaj događaj će obavijestiti korisnika kad god se ' tab ” pritisne se tipka u polju za unos primjenom sljedećeg uvjeta uz pomoć “ unutarnjiTekst ” svojstvo:

ulazni. addEventListener ( 'ključ' , ( i ) => {
ako ( i. ključ === 'Kartica' ) {
proizlaziti. unutarnjiTekst = 'Pritisnuta je tipka Tab' ;
} drugo {
proizlaziti. unutarnjiTekst = 'Tipka Tab nije pritisnuta' ;
}

U ovom slučaju, kada korisnik pritisne tipku tab, dodano će obavijestiti o izvršenoj radnji:

Metoda 2: Otkrivanje ključa kartice u JavaScriptu pomoću metode document.getElementbyId()

' document.getElementById() ” može se koristiti za pristup određenom HTML elementu na temelju njegovog ID-a. Ova se metoda može implementirati za dobivanje polja za unos i dodavanje događaja za upozorenje korisnika kad god se pritisne određena tipka, kao što je tipka tab.

Sintaksa

dokument. getElementById ( elementi )

U navedenoj sintaksi, ' elementi ” odnosi se na ID navedenog elementa.

Pogledajmo sljedeći primjer.

Primjer
U primjeru u nastavku uključite vrstu unosa i vrijednost rezerviranog mjesta kao što je objašnjeno u prethodnoj metodi:

< ulazni tip = 'tekst' iskaznica = 'tab' rezerviranog mjesta = 'Unesi tekst' >

Sada dohvatite ID polja za unos koristeći ' document.getElementById() ” metoda.

neka input= document.getElementById(“tab”);

Na kraju dodajte događaj pod nazivom ' spuštanje tipke ' u metodi addEventListener(), koja će upozoriti korisnika svaki put kada se ' tab ” je pritisnuta tipka:

ulazni. addEventListener ( 'ključ' , ( i ) => {
ako ( i. ključ === 'Kartica' ) {
uzbuna ( 'Pritisnuta je tipka Tab' ) ;
}
} ) ;

Izlaz

Raspravljali smo o svim najjednostavnijim metodama otkrivanja tipke tab u JavaScriptu.

Zaključak

Da biste otkrili tipku tab u JavaScriptu, upotrijebite ' addEventListener() ' s ' document.querySelector() ' metoda za dobivanje vrste unosa i primjenu događaja za otkrivanje navedenog ključa ili ' getElementbyId() ” metoda za dohvaćanje polja za unos na temelju njegovog ID-a i obavještavanje korisnika kad god je dodani uvjet zadovoljen. Ovaj blog vodio je o otkrivanju tipke tab u JavaScriptu.

Kako otkriti tipku Tab u JavaScriptu