Hvor å Endre skrive inn tekst med Javascript

Hvor å Endre skrive inn tekst med Javascript


Mange webutviklere bruke Javascript for å endre en brukers skriving etter han skriver den inn i en tekstboks. For eksempel kan du bruke Javascript for å fjerne støtende ord fra et forum brukerens innlegg. Du kan også vise en personlig hilsen til et nettsted besøkende etter at hun går inn i hennes navn på påmeldingsskjemaer. Etter å ha lært noen Javascript-kommandoer, kan du manipulere skrive inn tekst og formatere den som passer dine behov. Disse kommandoene er generiske og arbeid på tvers av alle nettlesere.

Bruksanvisning

1 Opprett en ny HTML-dokument.

2 Legg denne koden til kroppen delen av dokumentet:

<H2 id = \ "myHeading \"> </ h2> <p />
<Input id = \ "myTextbox \" type = \ "tekst \" /> <p />

Dette skaper en tom overskrift og en tekstboks element. Du vil skrive inn et navn i tekstboksen. IDer er valgfritt, men du må bruke dem hvis du har tenkt å manipulere innholdet i en HTML-element ved hjelp av Javascript.

3 Legg denne knappen element under tekstboksen erklæring:

<Input id = \ "changeText \" type = \ "-knappen \" value = \ "Klikk for å endre overskriften tekst \" onclick = \ "tilbake changeText () \" />

Når du klikker på knappen, vil Javascript endre teksten du skrev inn og vise den nye teksten i overskrift og tekstboksen.

4 Legg til Javascript-funksjonen til skriptet delen av dokumentet:

funksjon changeText () {
Var headingObject = document.getElementById ( 'myHeading')
GÅ
Var textboxObject = document.getElementById ( 'myTextbox')
GÅ
Var originalText = textboxObject.value
GÅ
textboxObject.value = \ "Hei \" + originalText
GÅ
headingObject.innerHTML = \ "Tekst endret til -> Hei \" + originalText
GÅ
}

Den \ "document.getElementById \" kommandoen henter et HTML-element og gjør den tilgjengelig for Javascript. I dette eksempelet, de to \ "document.getElementById kommandoer hente overskriften element (myHeading) og tekstboksen elementet (myTextbox). Funksjonen blir da teksten fra tekstboksen og legger \" Hei \ "til strengen. Endelig de \ "innerhtml \" egenskaper overskriften og teksten bokselementer er endret.

5 Åpne dokumentet i en nettleser, skriv inn et navn i tekstboksen og klikk på knappen. Javascript-funksjonen vil legge \ "Hei \" til navnet og oppdatere innholdet i de to HTML-elementer.

Hint

  • Bruk \ "innerhtml \" for å hente og oppdatere teksten i HTML-elementet. For eksempel kan du endre en knapp tekst fra \ "Klikk for å sende inn \" til \ "Takk for at du kjøpte XYZ \" etter et nettsted besøkende oppgav et produktnavn. Den \ "outerHTML \" egenskapen kan du endre teksten og stilen skrive inn tekst.