Hvordan sette fokus til en tekstboks i Javascript

I kjernen, er HTML en enkel måte å vise tekst og bilder på forskjellige måter. Det, sammen med evnen til å forankre linker til linjer med tekst, slik at en bruker å krysse forskjellige sider ved å klikke på koblingene, utgjør det viktigste formålet med HTML. Ulike teknologier har oppstått rundt HTML, styrking sine evner og gi det et skinn av interaktivitet. Javascript er en av disse teknologiene; det gir en utvikler å legge til ekstra funksjonalitet til HTML, slik som å ha en tekstboks automatisk valgt på lasting av siden.

Bruksanvisning

1 Skriv inn dine HTML overskrifter som vanlig. Overskriftene inneholde informasjon leseren trenger å vise siden på riktig måte. På det mest grunnleggende, overskriften trenger bare de "<HTML>" og "<HEAD>" tags.

2 Aktiver Javascript på siden. Skriv "<script type =" text / javascript ">" for å la leseren å tolke Javascript skikkelig.

3 Opprett Javascript-funksjonen i overskriften en. Denne funksjonen vil bli kalt når kroppen av siden er lastet, og vil få navnet på tekstboksen. Bruk "-funksjonen SetFocus ()", erstatte SetFocus med hva du ønsker funksjonsnavnet for å være. Pass på at du plasserer åpning brakett "{" umiddelbart på neste linje.

4 Sett skript å fokusere på ønsket inngangsboksen ved å skrive "document.getElementById (" inputName ") fokus ();". Change "inputName" til hva navnet på tekstboksen vil bli. Lukk funksjon med en avsluttende parentes, "}"

5 Lukk manus og header porsjoner. Dette gjøres med "</ script>" og "</ head>" koder.

6 Start HTML kroppen. Inkluder en "på load" samtale til SetFocus funksjon. "<Body onload = 'SetFocus ()'>" Change "SetFocus" til navnet på funksjonen.

7 Opprette et HTML-skjema med "<form>" tag. Bygg din input boksen som du vanligvis ville. Sørg for å inkludere en id tag som har samme navn som du brukte i funksjon. For eksempel, hvis du brukte "inputName" id tag bør lese "id = 'inputName'", men uten de første og siste anførselstegn.

8 Fullfør skjemaet og lukke den med "</ form>". Fullfør resten av siden din, og lukke den med et "</ body>" og "</ html>" tag.

9 Last inn siden i nettleseren for å kontrollere funksjonaliteten. Hvis fokuset ikke fungerer, må du kontrollere at alle navnene er skrevet inn riktig.

Hint

  • Når du skriver inn koden som er oppført i artikkelen fjerne de to utenfor anførselstegn. Hele koden skal se slik ut:
  • <Html>
  • <Head>
  • <Script type = "text / javascript">
  • fungere SetFocus ()
  • {
  • document.getElementById ( "inputName") fokus (.);
  • }
  • </ Script>
  • </ Head>
  • <Body onload = "SetFocus ()">
  • <Form>
  • Navn <input type = "text" id = "inputName">
  • </ Form>
  • </ Body>
  • </ Html>
  • Dette er en bare bones oppsett. Det vil ikke fungere i alle nettlesere, spesielt eldre nettleser bygget før 1999 og de som brukes i mobile plattformer som mobiltelefoner. Årsakene til tap av funksjonalitet er variert, så du må referere til spesifikk dokumentasjon for den nødvendige plattformen for mer informasjon om begrensningene til den plattformen og en eventuell løsning.