Molti sviluppatori web utilizzano JavaScript per modificare il testo di un utente dopo che egli si digita in una casella di testo di input. Ad esempio, è possibile utilizzare JavaScript per rimuovere parole sgradevoli dal post di un utente del forum. È inoltre potrebbe visualizzare un messaggio di saluto personale a un visitatore del sito dopo lei entra il suo nome su moduli di iscrizione. Dopo aver imparato alcuni comandi JavaScript, potete manipolare testo di input e formattarlo per soddisfare le vostre esigenze. Questi comandi sono generici e lavorare su tutti i browser.

Istruzioni

1

Creare un nuovo documento HTML.

2

Aggiungere questo codice alla sezione body del documento:

< h2 id = \ "myHeading\" >< / h2 >< p / >
< input id = \ "myTextbox\" tipo = \ "testo \" / >< p / >

Questo crea una voce vuota e un elemento della casella di testo. Entrerete un nome nella casella di testo. Gli ID sono facoltativi, ma è necessario utilizzarli se si prevede di modificare il contenuto di un elemento HTML utilizzando JavaScript.

3

Aggiungere questo elemento pulsante sotto la dichiarazione di casella di testo:

< input id = \ tipo "changeText\" = \ "button" valore = \ "Clicca per cambiare titolo testo \" onclick = \ "return changeText () \" / >

Quando si sceglie il pulsante, JavaScript verrà modificare il testo che hai inserito e visualizzare il nuovo testo nell'intestazione e la casella di testo.

4

Aggiungere questa funzione JavaScript alla sezione script del documento:

Function changeText() () {
var headingObject = document.getElementById('myHeading')
VAI
var textboxObject = document.getElementById('myTextbox')
VAI
var originalText = textboxObject.value
VAI
textboxObject.value = \"Hello \" + originalText
VAI
headingObject.innerHTML = \"Text modificato per -> Ciao \" + originalText
VAI
}

Il \"document.getElementById\" comando Recupera un elemento HTML e lo rende disponibile a JavaScript. In questo esempio, i due comandi di \"document.getElementById recuperano l'elemento di intestazione (myHeading) e l'elemento della casella di testo (myTextbox). La funzione quindi ottiene il testo dalla casella di testo e aggiunge \"Hello\" alla stringa. Infine, la \"innerHTML\" vengono modificate le proprietà degli elementi di casella intestazione e testo.

5

Aprire il documento in un browser, immettere un nome nella casella di testo e fare clic sul pulsante. La funzione JavaScript aggiungerà \"Hello\" al nome e aggiornare il contenuto dei due elementi HTML.

Consigli & Avvertenze

• Utilizzare il \"innerHTML\" per recuperare e aggiornare il testo di qualsiasi elemento HTML. Ad esempio, è possibile modificare testo di un pulsante da \"Click a submit\" a \"Thank per l'acquisto di XYZ\" dopo che un visitatore del sito immesso un nome di prodotto. Il \"outerHTML\" proprietà consente di modificare il testo e lo stile di testo di input.