Hvordan nøkkelkoder fungerer i JavaScript?

Keycoder i JavaScript -arbeid ved å tilordne en bestemt nøkkelkodeverdi til den tilsvarende nøkkelen. Denne funksjonaliteten hjelper til med å begrense brukeren fra å legge inn en ugyldig verdi, spesielt når han fyller ut et skjema eller et spørreskjema. Tilsvarende å be om sluttbrukeren til den aktiverte “Caps Lock”Når du fyller et saksfølsomt felt.

Hva er nøkkelkoder?

JavaScript tildeler en numerisk kode til hver tast som er inneholdt i et tastatur. Nøkkelkoder for alfanumeriske og funksjonstaster er nummerert fortløpende. I denne bloggen vil arbeidet med følgende nøkkelkoder mot de spesielle nøklene bli forklart:

Nøkkel	Nøkkelkode
Tab	9
Tast inn	1. 3

Syntaks

begivenhet.nøkkelkode

I syntaks ovenfor:

• “begivenhet”Henviser til den vedlagte hendelsen til den aktuelle nøkkelen mot nøkkelkoden.

Hvordan fungerer nøkkelkoder i JavaScript?

Arbeidet med nøkkelkoder kan utføres ved å bruke “AddEventListener ()”Metode i kombinasjon med følgende metoder:

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

Tilnærming 1: Arbeid av nøkkelkoder i JavaScript ved bruk av getElementById () -metoden

“AddEventListener ()”Metode knytter en hendelse til elementet, og“getElementById ()”Metode får tilgang til et element som har den spesifiserte”id”. Disse metodene kan brukes for å få tilgang til inngangstekstfeltet og oppdage den spesielle tasten ved hjelp av den tildelte nøkkelkoden og en vedlagt hendelse.

Syntaks

element.AddEventListener (arrangement, lytter, bruk);

I syntaks ovenfor:

• “begivenhet”Indikerer den vedlagte hendelsen.
• “lytter”Tilsvarer funksjonen som vil bli påkalt.
• “bruk”Er den valgfrie verdien.

dokument.getElementById (element)

I den gitte syntaks:

• “element”Tilsvarer“id”Å bli hentet mot det aktuelle elementet.

Eksempel

La oss fokusere på det under-uttalte eksemplet:

Oppdag fane -tasten

La få = dokument.getElementById ("tekst");
La resultat = dokument.getElementById ("hode");
få.AddEventListener ("KeyDown", (e) =>
hvis (e.Keycode === 9)
resultat.Innertext = "Tab -tastetrykk";

annet
resultat.Innertext = "Tab -tasten ikke trykket på";

);

I ovennevnte kode-snippet:

• Tildel en inngang "tekst”Felt med det spesifiserte”id”Og“stedholder”Verdi.
• I neste trinn, inkluder det angitte overskriften for å inneholde meldingen som vises på dokumentobjektsmodellen (DOM) etter påvisning av den aktuelle tasten.
• I JavaScript -delen av koden får du tilgang til inngangen "tekst”Felt og det inkluderte overskriften av deres“ID -er" bruker "getElementById ()”Metode.
• Etter det, legg ved en hendelse som heter “Keydown" til "inngang”Tekstfelt ved hjelp av“AddEventListener ()”Metode.
• Bruk også “nøkkelkode”Eiendom og tilordne den nøkkelkoden til“Tab”Nøkkel.
• Dette vil resultere i å vise den oppgitte meldingen i “hvis”Tilstand som en overskrift når du oppdager fanen -tasten via“Innertekst”Eiendom.
• I det andre tilfellet, "ellers”Tilstanden vil utføre.

Produksjon

Fra ovennevnte utgang kan det observeres at deteksjonen av "Tab”Nøkkel blir gjort med hell.

Tilnærming 2: Arbeid av nøkkelkoder i JavaScript ved hjelp av QuerySelector () -metoden

“QuerySelector ()”Metoden får det første elementet som samsvarer med en CSS -velger. Denne metoden kan brukes til å få tilgang til inngangstekstfeltet på lignende måte og knytte en hendelse til den, noe som resulterer i deteksjon av den spesifiserte tasten basert på nøkkelkoden.

Syntaks

dokument.QuerySelector (CSS Selectors)

I ovennevnte syntaks:

• “CSS -velgere”Refererer til en eller flere enn en CSS -velgere.

Eksempel

La oss observere følgende eksempel trinn for trinn:

Oppdage enter -tasten

La få = dokument.QuerySelector ("Input");
La resultat = dokument.QuerySelector ("H2");
få.AddEventListener ("KeyDown", (e) =>
hvis (e.Keycode === 13)
resultat.innertekst = "Enter tastet tastet";

annet
resultat.Innertext = "Enter Tast Not Pressed";

);

I kodelinjene ovenfor, utfør følgende trinn:

• Husk de diskuterte trinnene for å inkludere et inngangstekstfelt og en overskrift.
• I JavaScript -delen får du tilgang til det tildelte inngangsfeltet og overskriften ved å bruke "QuerySelector ()”Metode.
• I neste trinn kan du legge ved en hendelse som heter “Keydown" til "inngang”Tekstfelt” ved hjelp av “AddEventListener ()”Metode.
• Også spesifisere "nøkkelkode" av "Tast inn”Nøkkel via“nøkkelkode”Eiendom.
• Dette vil resultere i å vise den tilsvarende meldingen i "hvis”Tilstand ved detekterte”Tast inn”Nøkkel.
• I det andre tilfellet, "ellers”Tilstanden vil forbli i kraft.

Produksjon

I ovennevnte utgang kan det observeres at ved påvisning av "Tast inn”Key, overskriften endres, og gjør dermed deteksjonen vellykket.

Konklusjon

“AddEventListener ()“Metode i kombinasjon med“getElementById ()”Metode, eller“QuerySelector ()”Metode kan implementeres for å sikre at de fungerer på nøkkelkoder i JavaScript. Den tidligere tilnærmingen kan brukes for å få tilgang til inngangstekstfeltet og oppdage den spesifikke tasten via nøkkelkode ved hjelp av en vedlagt hendelse. Den sistnevnte tilnærmingen kan brukes for å få tilgang til inngangstekstfeltet og legge ved en hendelse til den, som vil oppdage den spesifikke tasten basert på nøkkelkoden. Denne opplæringen forklarte arbeidet med nøkkelkoder i JavaScript.