Ta zapis vas bo vodil, kako zaznati tabulatorsko tipko v JavaScriptu.
Kako zaznati tabulatorsko tipko v JavaScriptu?
Če želite zaznati tabulatorsko tipko v JavaScriptu, uporabite naslednje tehnike:
- “ querySelector() ” Metoda
- “ getElementbyId() ” Metoda
Omenjene pristope bomo demonstrirali enega za drugim!
1. način: zaznavanje tabulatorskega ključa v JavaScriptu z uporabo metode document.querySelector().
' document.querySelector() ” dostopa do prvega elementa, ki se ujema z izbirnikom CSS, nato pa metoda addEventListener() elementu, do katerega dostopate, doda obravnavo dogodkov. Te metode je mogoče uporabiti za dostop do vrste vnosa in zaznavanje, ali je tipka tabulatorka ob vnosu njene vrednosti pritisnjena ali ne.
Sintaksa
element. addEventListener ( dogodek , funkcijo , useCapture )
V dani sintaksi je ' dogodek ' se nanaša na ime dogodka, ' funkcijo ” je posebna funkcija, ki se izvede, ko pride do dogodka, in „ useCapture ” je izbirni argument.
dokument. querySelector ( Izbirniki CSS )V zgornji sintaksi ' Izbirniki CSS ” se nanašajo na enega ali več izbirnikov CSS, ki jih je mogoče podati v metodi document.querySelector().
Preglejte naslednji primer za boljše razumevanje navedenega koncepta.
Primer
Najprej določite vrsto vnosa kot ' besedilo « z začetno vrednostjo nadomestnega mesta in naslovom v »
< h2 > Rezultat < / h2 >
Nato uporabite » document.querySelector() ” za dostop do določenega vnosa oziroma naslova in ju shranite v spremenljivke z imenom “ vnos « in » rezultat ”:
pusti vnos = dokument. querySelector ( 'vnos' ) ;pusti rezultat = dokument. querySelector ( 'h2' ) ;
Zdaj dodajte » keydown ” z vnosnim poljem z uporabo metode addEventListener(). Ta dogodek bo uporabnika obvestil vsakič, ko bo » zavihek ” pritisnete tipko v vnosnem polju tako, da uporabite naslednji pogoj s pomočjo “ innerText ” Lastnost:
vnos. addEventListener ( 'keydown' , ( in ) => {če ( in. ključ === 'Tab' ) {
rezultat. innerText = 'Pritisnjena tipka Tab' ;
} drugače {
rezultat. innerText = 'Tipka Tab ni pritisnjena' ;
}
V tem primeru, ko bo uporabnik pritisnil tabulatorko, bo dodano obvestilo o izvedenem dejanju:
2. način: zaznavanje tabulatorskega ključa v JavaScriptu z uporabo metode document.getElementbyId()
' document.getElementById() ” se lahko uporabi za dostop do določenega elementa HTML na podlagi njegovega ID-ja. To metodo je mogoče implementirati za pridobitev vnosnega polja in dodajanje dogodka, ki opozori uporabnika, kadar koli pritisne določeno tipko, kot je tipka tabulator.
Sintaksa
dokument. getElementById ( elementi )V dani sintaksi je ' elementi ” se nanaša na ID določenega elementa.
Oglejmo si naslednji primer.
Primer
V spodnjem primeru vključite vrsto vnosa in vrednost ograde, kot je opisano v prejšnji metodi:
Zdaj pridobite ID vnosnega polja z uporabo ' document.getElementById() ” metoda.
let input= document.getElementById(“tab”);
Nazadnje dodajte dogodek z imenom ' keydown « v metodi addEventListener(), ki bo uporabnika opozorila vsakič, ko se » Tab ” je pritisnjena tipka:
vnos. addEventListener ( 'keydown' , ( in ) => {če ( in. ključ === 'Tab' ) {
opozorilo ( 'Pritisnjena tipka Tab' ) ;
}
} ) ;
Izhod
Razpravljali smo o vseh najpreprostejših metodah za odkrivanje tabulatorske tipke v JavaScriptu.
Zaključek
Če želite zaznati tabulatorsko tipko v JavaScriptu, uporabite » addEventListener() ' z ' document.querySelector() ' za pridobivanje vrste vnosa in uporabo dogodka za odkrivanje določenega ključa ali ' getElementbyId() ” metoda za pridobivanje vnosnega polja na podlagi njegovega ID-ja in obveščanje uporabnika, ko je dodani pogoj izpolnjen. Ta blog je vodil o odkrivanju tabulatorske tipke v JavaScriptu.