Denne oppskriften vil veilede deg til å oppdage tabulatortasten i JavaScript.
Hvordan oppdage Tab Key i JavaScript?
For å oppdage tabulatortasten i JavaScript, bruk følgende teknikker:
- ' querySelector() ' Metode
- ' getElementbyId() ' Metode
De nevnte tilnærmingene vil bli demonstrert én etter én!
Metode 1: Finn tabulatornøkkel i JavaScript ved å bruke document.querySelector()-metoden
« document.querySelector() ”-metoden får tilgang til det første elementet som samsvarer med en CSS-velger, og deretter legger addEventListener()-metoden til en hendelsesbehandler til det åpnede elementet. Disse metodene kan brukes for å få tilgang til inndatatypen og oppdage om tabulatortasten trykkes eller ikke når verdien angis.
Syntaks
element. addEventListener ( begivenhet , funksjon , useCapture )
I den gitte syntaksen, ' begivenhet ' refererer til hendelsesnavnet, ' funksjon ' er den spesifikke funksjonen som skal utføres når hendelsen inntreffer, og ' useCapture ” er det valgfrie argumentet.
dokument. querySelector ( CSS-velgere )I syntaksen ovenfor, ' CSS-velgere ” refererer til en eller flere CSS-velgere som kan spesifiseres i document.querySelector()-metoden.
Gå gjennom følgende eksempel for en bedre forståelse av det angitte konseptet.
Eksempel
Først spesifiser inndatatypen som ' tekst ' med en innledende plassholderverdi og en overskrift i '
< h2 > Resultat < / h2 >
Deretter bruker du ' document.querySelector() ' metode for å få tilgang til henholdsvis den angitte inngangen og overskriften og lagre dem i variablene kalt ' input ' og ' resultat ':
la innspill = dokument. querySelector ( 'inngang' ) ;la resultatet = dokument. querySelector ( 'h2' ) ;
Legg nå til ' tastene ned ”-hendelse med inndatafeltet ved å bruke addEventListener()-metoden. Denne hendelsen vil varsle brukeren når ' fanen '-tasten trykkes i inntastingsfeltet ved å bruke følgende betingelse ved hjelp av ' indreTekst ' eiendom:
input. addEventListener ( 'taste ned' , ( og ) => {hvis ( og. nøkkel === 'Tab' ) {
resultat. indreTekst = 'Tab-tast trykket' ;
} ellers {
resultat. indreTekst = 'Tab-tasten ikke trykket' ;
}
I dette tilfellet, når brukeren trykker på tabulatortasten, vil den lagte varsle om den utførte handlingen:
Metode 2: Finn tabulatornøkkel i JavaScript ved å bruke document.getElementbyId()-metoden
« document.getElementById() ”-metoden kan brukes for å få tilgang til et bestemt HTML-element basert på dets id. Denne metoden kan implementeres for å få inndatafeltet og legge til en hendelse for å varsle brukeren hver gang den bestemte tasten trykkes, for eksempel tabulatortasten.
Syntaks
dokument. getElementById ( elementer )I den gitte syntaksen, ' elementer ” refererer til ID-en til et spesifisert element.
La oss se på følgende eksempel.
Eksempel
I eksemplet nedenfor inkluderer du en inndatatype og en plassholderverdi som diskutert i forrige metode:
Hent nå inndatafelt-ID-en ved å bruke ' document.getElementById() 'metoden.
la input= document.getElementById(“tab”);
Til slutt, legg til en hendelse kalt ' tastene ned ' i addEventListener()-metoden, som vil varsle brukeren når ' Tab '-tasten trykkes:
input. addEventListener ( 'taste ned' , ( og ) => {hvis ( og. nøkkel === 'Tab' ) {
varsling ( 'Tab-tast trykket' ) ;
}
} ) ;
Produksjon
Vi har diskutert alle de enkleste metodene for å oppdage tabulatortasten i JavaScript.
Konklusjon
For å oppdage tabulatornøkkel i JavaScript, bruk ' addEventListener() ' med ' document.querySelector() '-metoden for å få inndatatypen og bruke en hendelse for å oppdage den angitte nøkkelen eller ' getElementbyId() ” metode for å hente inndatafeltet basert på dets id og varsle brukeren når den tilføyde betingelsen er oppfylt. Denne bloggen veiledet om å oppdage tabulatornøkkel i JavaScript.