JavaScript | Fokus

I JavaScript brukes Focus () -metoden for å sette fokus på ethvert element på HTML -websiden, noe som betyr at det setter det elementet som det aktive elementet. Det viktigste poenget her er at det bare fokuserer på elementene som "kan”Vær fokusert på. Med enkle ord kan ikke alle elementene være fokusert på.

Å bedre forstå fokus() Metode, se på syntaksen nedenfor:

element.Fokus (alternativer);

I denne syntaksen:

• element: Det er referansen til et HTML -element i JavaScript.
• alternativer: Det er ikke en nødvendig parameter.

Eksempel 1: Fokus på et tekstfelt ved hjelp av Focus () -metoden

Begynn med å opprette et nytt HTML -dokument, og lag et inngangsfelt i det dokumentet og en knapp med følgende linjer:

Fokuser på tekstfeltet

I linjene ovenfor:

• Inngangskode har fått IDen som "Tf1”
• Knappen har ID som "BTN1”Og et OnClick -attributt satt til“ ButtonClicked () ”

Å kjøre dette HTML -dokumentet viser følgende på nettleseren:

Tekstfeltet og knappen vises begge på nettsiden. For å legge til funksjonaliteten på knappetrykk, legg til følgende linjer i JavaScript -filen:

funksjon Buttonclicked ()
TF = dokument.getElementById ("tf1");
tf.fokus();

I ovennevnte JavaScript -linjer:

• Opprett først en funksjon som heter som knappklikket ()
• I den funksjonen får du referansen til tekstfeltet ved å bruke IDen og lagre den referansen i "tf”Variabel
• Etter det, bare ring fokus() metode med “tf”Variabel ved hjelp av prikkoperatøren

På dette tidspunktet produserer Webside følgende utfall:

Det kan observeres i utgangen, at å trykke på putingen setter tekstfeltet som aktivt eller “i fokus”.

Eksempel 2: med fokus på et element med "alternativer" argumenter

I dette eksemplet er hovedmålet å ha et element i en rullbar posisjon. Etter det skal knappen ikke bare fokusere på det elementet, men også bringe det elementet i syne fra dokumentet.

Begynn med å lage et HTML -dokument, og akkurat som i det første eksemplet, lag et tekstfelt og en knapp med følgende linjer:

type = "tekst"
id = "tf1"
klasse = "rullet"
Placeholder = "Jeg er en tekstfelt"
/>

Fokuser på tekstfeltet

I disse linjene er den eneste forskjellen:

• Innspillet som nå har en klasse “rullet”, Som vil bli brukt til å plassere denne inngangskoden i en rullbar posisjon i dokumentet

Etter det, legg til følgende linjer i CSS -filen eller i stikkord:

kropp
Høyde: 7000px;

.rullet
Posisjon: Absolutt;
Topp: 4000px;

I linjene nevnt ovenfor:

• Dokumentet har vært en høyde på 7000px slik at dokumentet blir rullbart
• Etter det setter vi elementet med rullet klasse til en absolutt posisjon på 4000px fra toppen

Å kjøre dette HTML -dokumentet gir følgende webside på nettleseren:

Fra utgangen er det klart at tekstfeltet nå er plassert i en posisjon av 4000px fra toppen.

Etter det skal vi legge til følgende linjer med JavaScript:

funksjon Buttonclicked ()
TF = dokument.getElementById ("tf1");
tf.Fokus (forhindrerCroll: falsk);

I disse linjene:

• En funksjon knappklikket () er laget
• I den funksjonen blir en referanse til tekstfeltet laget ved å bruke IDen og lagres inne i variabelen “tf”.
• Etter det, bruk fokus() Metode på tekstfeltet og i sitt argument passering forhindrer CROLL: FALSE. Dette vil bringe elementet i fokus og bla dokumentet for å bringe det elementet i sikte.

Kjør HTML -dokumentet, så får du følgende resultat når du klikker på knappen:

Det kan observeres fra utdataene at ved å klikke på knappen, blir tekstfeltet brakt inn i nettleseren ved å bla på dokumentet. Dessuten er tekstfeltet nå fokusert på.

Konklusjon

Denne artikkelen kaster lys over formålet og arbeidet med fokus() Metode i JavaScript. Denne metoden brukes til å bringe et element i HTML -dokumentet i fokus, eller med mye enklere ord setter det deres aktive eiendom som sant. For å bruke denne metoden, bruk den bare med referansen til HTML -elementet med en DOT -operatør. Denne fokusmetoden kan også ta inn et valgfritt argument som er påvist ovenfor.