Hvordan sette fokus på et HTML -formelement i JavaScript

Fokus på elementet refererer til delen av den aktive siden for øyeblikket. I det nåværende dokumentet kan ett HTML -element fokuseres på om gangen, som kan være et vindu, tekstboks eller knapp. I HTML -skjemaer skal inngangsfeltet være et aktivt element, ettersom mange elementer ikke tillater fokusering som standard. Så for å fokusere på elementene, bruk htmlelement.Fokus () Metode.

Dette blogginnlegget vil illustrere prosessen med å sette fokus på et element i en HTML -form i JavaScript.

Hvordan sette fokus på et HTML -formelement i JavaScript?

For å sette fokus til et element i en HTML -form, kan JavaScript Focus () -metoden brukes. For å gjøre det, ring denne metoden mens du gir den gjenstanden for elementet som må fokuseres.

Syntaks
Følg den under-nevnte metoden for å fokusere på et element i en HTML-form:

Htmlelement.fokus()

La oss prøve noen eksempler for å se hvordan du kan sette fokus på et element mens du er på sidelasting eller på svevet av et element.

Eksempel 1: Sett fokus på et HTML -skjemaelement på sidebelastning
I det gitte eksemplet vil vi sette fokus på inngangstekstfeltet på siden Load. Så lag et skjema med et inngangstekstfelt som vil være aktivt mens siden lastes inn:

HTML -skjemaet vil se slik ut:

Som du ser viser output ovenfor et inngangsfelt som ikke er aktivt. Så for å fokusere på denne tekstboksen, bruk den undergitte JavaScript-koden:

vindu.onload = funksjon ()
dokument.getElementById ("tekst").fokus();

I kodelinjene ovenfor:

• Definere en funksjon på "vindu.på Last" begivenhet.
• Ring "fokus()”Metode ved å hente HTML -elementet“tekstboks”Bruker den tildelte ID -en ved hjelp av“getElementById ()”Metode.

Den tilsvarende utgangen vil være som følger:

Ovennevnte GIF indikerer at tekstboksen er aktiv på siden Load.

Neste, la oss se hvordan du kan sette fokus på inngangsfeltet mens vi svever på elementet.

Eksempel 2: Sett fokus på et HTML -formelement på å sveve elementet
For å sette fokus på tekstboksen mens du svever på den, bruk "onmouseover”Hendelseslytter:

Definere en funksjon som heter “ElementFocus ()”Det vil utløse mens musenes hendelser oppstår:

funksjon ElementFocus ()
dokument.getElementById ("tekst").fokus();

Utgangen viser at tekstboksen vil være aktiv mens musen svever på den:

Vi har gitt den essensielle informasjonen relatert til å fokusere HTML -elementet i en HTML -form ved hjelp av JavaScript.

Konklusjon

For å sette fokus på et element i en HTML -form i JavaScript, bruk "Htmlelement.fokus()”Metode. Det kan settes på HTML -elementene som "tekstboks”,“knapp" og så videre. Du kan angi fokus på elementet mens du er på sidelastningen eller en hvilken som helst annen hendelse. Denne bloggen illustrerte prosessen for å sette fokus på et element i en HTML -form i JavaScript.