Hvordan sette fokus på en Javascript-funksjon

November 24

Innenfor en HTML-side, refererer fokus til hvilket element er nå satt for brukermedvirkning. Vanligvis brukes med former, gjelder fokus på brukerkontrollene for eksempel tekst inntastingsfelt, knapper, check-bokser, radioknapper og rullegardinlistene. Brukeren kan sette fokus ved å klikke på et element eller ved hjelp av deres "Tab" -tasten for å bevege seg mellom sideelementer. Alternativt kan utviklere sette fokus med klientsiden scripting i Javascript. Dette kan forbedre brukervennligheten i interaktive websider.

Bruksanvisning

1 Bygg din side HTML. Hvis du ikke allerede har gjort det, opprette en HTML-side ved å åpne en ny fil i et tekstredigeringsprogram og lagre det med ".html" som forlengelse, skrive inn følgende disposisjon kode:

<Html>

<Head>

</ Head>

<Body>

</ Body>

</ Html>

Dette er den grunnleggende formen på en HTML-side, og kan inneholde mange ulike typer tekst, medier og interaktive elementer. Ta med noe innhold du liker i kroppen på siden, mellom åpning og lukking "body" koder.

2 Sett inn element du ønsker å gi fokus til, gir det en "id" attributt. Følgende eksempel bruker et tekstfelt i et skjema:

<Form>

Skriv noe: <input type = "text" name = "txtfield" id = "entry" />

</ Form>

Dette viser tekstfeltet på siden, med "entry" som sitt ID. Brukere kan skrive inn tekst i feltet når det har fokus. Avhengig av hva annet som skjer når brukeren ser på siden, vil de trenger å klikke på feltet, eller fane til den via andre elementer før de kan skrive inn tekst.

3 Bruk Javascript for å finne tekstfeltet. I siden hoveddelen din, mellom åpning og lukking "hodet" tags, angir et område for Javascript-kode:

// Koden går her

</ Script>

Mellom "script" tags lage en funksjon for å finne tekstfeltet:

funksjon focusField () {

Var tField = document.getElementById ( 'entry');

}

Før du kan fokusere elementet, må Javascript-koden finner det i dokumentet trestruktur. Ved å bruke elementet unike ID skriptet kan se gjennom dokumentet, får elementet og lagre en referanse til det i en variabel.

4 Fokuser tekstfeltet ved hjelp av Javascript. Etter linjen lagring elementet referanse i en variabel, inkluderer følgende kode, med fokus samhandling i tekstfeltet:

tField.focus ();

Når feltet er fokusert, skal markøren vises i den på brukerens skjerm, noe som indikerer at den er klar for tekst som skal skrives inn.

5 Ring din fokuseringsmetode på siden din. Du må bestemme når du vil at elementet å motta fokus. I mange tilfeller vil dette være når det oppstår noen annen hendelse på siden din, for eksempel gjennomføring av et annet tekstfelt. Når dette skjer, må du ringe metoden instruere nettleseren til å fokusere på det valgte elementet. Dette eksemplet viser elementet blir gitt fokus så snart siden lastes, ved å endre HTML "kroppen" element:

Lagre filen og teste den i en nettleser.

Hint

Du kan sende inn navnet på elementet for å være fokusert som en parameter til "focusField" metoden hvis dette passer din side.
Ikke anta at siden din fungerer som det skal etter å ha testet det bare i din egen nettleser. Javascript-funksjoner må testes på tvers av nettlesere som de ofte oppfører seg uforutsigbart.