Hvordan oppdage fane -tasten i JavaScript

Vi kommer ofte over nettsteder eller websider som inneholder det saksfølsomme elementet. Dessuten lar noen websider ikke legge inn dataene så lenge den spesifikke tasten, for eksempel Caps Lock, trykkes, spesielt når det gjelder passord. I slike tilfeller blir det å oppdage fanen -tasten i JavaScript veldig nyttig for å varsle brukeren om de angitte dataene på forhånd.

Denne oppskrivningen vil guide deg til å oppdage fanen-tasten i JavaScript.

Hvordan oppdage fane -tasten i JavaScript?

For å oppdage fanen -tasten i JavaScript, bruk følgende teknikker:

• “QuerySelector ()”Metode
• “getElementById ()”Metode

De nevnte tilnærmingene vil bli demonstrert en etter en!

Metode 1: Detect Tab -tasten i JavaScript ved hjelp av dokument.QuerySelector () -metode

“dokument.QuerySelector ()”Metode får tilgang til det første elementet som samsvarer med en CSS -velger, og deretter legger AddEventListener () -metoden en hendelsesbehandler til det tilgangede elementet. Disse metodene kan brukes for å få tilgang til inngangstypen og oppdage om fanenasten trykkes eller ikke når verdien er angitt.

Syntaks

element.AddEventListener (hendelse, funksjon, usecapture)

I den gitte syntaksen, “begivenhet”Henviser til hendelsesnavnet,”funksjon”Er den spesifikke funksjonen som skal utføres når hendelsen oppstår, og“Bruket”Er det valgfrie argumentet.

dokument.QuerySelector (CSS Selectors)

I syntaks ovenfor, "CSS -velgere”Se en eller flere CSS -velgere som kan spesifiseres i dokumentet.QuerySelector () -metode.

Gå gjennom følgende eksempel for en bedre forståelse av det uttalte konseptet.

Eksempel
For det første, spesifiser inngangstypen som "tekst”Med en innledende plassholderverdi og en overskrift i“" stikkord:

Resultat

Neste, bruk "dokument.QuerySelector ()”Metode for tilgang til den spesifiserte inngangen og overskriften og lagrer dem i variablene som heter“inngang”Og“resultat”:

La input = dokument.QuerySelector ("Input");
La resultat = dokument.QuerySelector ("H2");

Nå, legg til “Keydown”Hendelse med inngangsfeltet ved hjelp av AddEventListener () -metoden. Denne hendelsen vil varsle brukeren når "Tab”Nøkkel trykkes i inngangsfeltet ved å bruke følgende tilstand ved hjelp av“Innertekst”Eiendom:

inngang.AddEventListener ("KeyDown", (e) =>
hvis (e.tast === "Tab")
resultat.Innertext = "Tab -tastetrykk";
annet
resultat.Innertext = "Tab -tasten ikke trykket på";

I dette tilfellet, når brukeren vil trykke på TAB -tasten, vil den ekstra varsle om den utførte handlingen:

Metode 2: Detect Tab -tasten i JavaScript ved hjelp av dokumentet.getElementById () -metode

“dokument.getElementById ()”Metode kan brukes for å få tilgang til et bestemt HTML -element basert på IDen. Denne metoden kan implementeres for å få inndatafeltet og legge til en hendelse for å varsle brukeren når den aktuelle tasten trykkes, for eksempel Tab -tasten.

Syntaks

dokument.getElementById (ElementId)

I den gitte syntaksen, “ElementId”Henviser til IDen til et spesifisert element.

La oss oversikt følgende eksempel.

Eksempel
I eksemplet nedenfor inkluderer en inngangstype og en plassholderverdi som diskutert i forrige metode:

Nå, hent inngangsfelt -IDen ved å bruke “dokument.getElementById ()”Metode.

La input = dokument.getElementById (“Tab”);

Til slutt, legg til en hendelse som heter “Keydown”I AddEventListener () -metoden, som vil varsle brukeren når“Tab”Nøkkel er trykket på:

inngang.AddEventListener ("KeyDown", (e) =>
hvis (e.tast === "Tab")
Alert ("Tab -tastetrykk");

);

Produksjon

Vi har diskutert alle de enkleste metodene for å oppdage fanen -tasten i JavaScript.

Konklusjon

For å oppdage fane -tasten i JavaScript, bruk "AddEventListener ()" med "dokument.QuerySelector ()”Metode for å få inngangstypen og bruke en hendelse for å oppdage den spesifiserte tasten eller“getElementById ()”Metode for å hente inngangsfeltet basert på IDen og varsle brukeren når den ekstra tilstanden er fornøyd. Denne bloggen guidet om å oppdage fane -tasten i JavaScript.