Per dare indicazioni all’utente, che sta navigando su un sito web, di come compilare un form correttamente, spesso diamo dei valori pre impostati nei vari campi.

Il problema che può sorgere per un web designer è fare in modo che il campo di input si azzeri al momento del clic, facendo sparire la scritta settata di default.

Possiamo facilmente trovare una soluzione con poche righe di codice Javascript.

Ipotesi A – Facciamo sparire la scritta dal campo pre compilato nel momento del clic

<input id="campo_id" onclick="this.value=''" name="name" type="text" value="valore" />

La parte del codice che svolge il compito è:
onClick="this.value=''"
che dice al browser di far sparire il contenuto del campo al momento del clic.

Ipotesi B – Facciamo sparire la scritta dal campo pre compilato se l’utente clicca, ma la facciamo riapparire se non viene completato il form

<input id="campo_id" onfocus = "this.value = '';" onblur  = "if(this.value == '') this.value = 'Testo precompilato' " name="name" type="text" value="Testo precompilato" />

La parte del codice che svolge il compito è:
onfocus = "this.value = '';" onblur = "if(this.value == '') this.value = 'Testo precompilato' "
che dice al browser di eliminare il contenuto nel momento in cui l’elemento riceve il focus dal puntatore del mouse e di ripristinarlo quando il focus viene perso.