Denne opskrivning vil guide dig til at finde tabulatortasten i JavaScript.
Hvordan finder man tabulatornøgle i JavaScript?
For at opdage tabulatornøglen i JavaScript skal du anvende følgende teknikker:
- “ querySelector() ' Metode
- “ getElementbyId() ' Metode
De nævnte tilgange vil blive demonstreret én efter én!
Metode 1: Find Tab-nøgle i JavaScript ved hjælp af document.querySelector()-metoden
Det ' document.querySelector() ”-metoden får adgang til det første element, der matcher en CSS-vælger, og derefter tilføjer addEventListener()-metoden en hændelseshandler til det tilgåede element. Disse metoder kan anvendes til at få adgang til inputtypen og detektere, om tabulatortasten trykkes eller ej, når dens værdi indtastes.
Syntaks
element. addEventListener ( begivenhed , fungere , brug Capture )
I den givne syntaks, ' begivenhed ' refererer til begivenhedens navn, ' fungere ' er den specifikke funktion, der skal udføres, når hændelsen opstår, og ' brug Capture ” er det valgfrie argument.
dokument. querySelector ( CSS-vælgere )I ovenstående syntaks, ' CSS-vælgere ” refererer til en eller flere CSS-vælgere, der kan angives i document.querySelector()-metoden.
Gennemgå følgende eksempel for en bedre forståelse af det angivne koncept.
Eksempel
Angiv først inputtypen som ' tekst ' med en indledende pladsholderværdi og en overskrift i '
< h2 > Resultat < / h2 >
Anvend derefter ' document.querySelector() ” metode til at få adgang til henholdsvis det specificerede input og overskriften og gemme dem i variablerne med navnet “ input ' og ' resultat ”:
lad input = dokument. querySelector ( 'input' ) ;lad resultatet = dokument. querySelector ( 'h2' ) ;
Tilføj nu ' tasten ned ” hændelse med inputfeltet ved hjælp af addEventListener() metoden. Denne begivenhed vil give brugeren besked, når ' fanen ”-tasten trykkes i indtastningsfeltet ved at anvende følgende betingelse ved hjælp af ” indreTekst ” ejendom:
input. addEventListener ( 'tast ned' , ( og ) => {hvis ( og. nøgle === 'Fane' ) {
resultat. indreTekst = 'Tabulatortast trykket' ;
} andet {
resultat. indreTekst = 'Tabulatortast ikke trykket' ;
}
I dette tilfælde, når brugeren trykker på tabulatortasten, vil den tilføjede give besked om den udførte handling:
Metode 2: Find Tab-nøgle i JavaScript ved hjælp af document.getElementbyId()-metoden
Det ' document.getElementById() ”-metoden kan bruges til at få adgang til et bestemt HTML-element baseret på dets id. Denne metode kan implementeres for at få inputfeltet og tilføje en hændelse for at advare brugeren, når den bestemte tast trykkes, såsom tabulatortasten.
Syntaks
dokument. getElementById ( elementer )I den givne syntaks, ' elementer ' refererer til id'et for et specificeret element.
Lad os gennemgå følgende eksempel.
Eksempel
I eksemplet nedenfor skal du inkludere en inputtype og en pladsholderværdi som beskrevet i den foregående metode:
Hent nu inputfelt-id'et ved at bruge ' document.getElementById() ” metode.
lad input= document.getElementById(“tab”);
Tilføj endelig en begivenhed med navnet ' tasten ned ' i addEventListener() metoden, som vil advare brugeren, når ' Tab ” tasten er trykket:
input. addEventListener ( 'tast ned' , ( og ) => {hvis ( og. nøgle === 'Fane' ) {
alert ( 'Tabulatortast trykket' ) ;
}
} ) ;
Produktion
Vi har diskuteret alle de enkleste metoder til at opdage tabulatortasten i JavaScript.
Konklusion
For at finde tabulatortasten i JavaScript skal du bruge ' addEventListener() ' med ' document.querySelector() ” metode til at hente inputtypen og anvende en hændelse til at detektere den angivne nøgle eller “ getElementbyId() ” metode til at hente inputfeltet baseret på dets id og give brugeren besked, når den tilføjede betingelse er opfyldt. Denne blog guidede om registrering af tabulatornøgle i JavaScript.