Modificare l’attributo VALUE negli input al passaggio del mouse

L’attributo Value, in italiano valore, permette di decidere quale testo lasciare di default negli elementi input, cioè caselle di testo dei form o pulsanti di submit. E’ il tipico testo che troviamo all’interno dei box di ricerca con la scritta “cerca”. Google invece utilizza un’immagine come testo predefinito per i suoi motori di ricerca personalizzati, e al cliccare del mouse, o più precisamente quando si mette onfocus l’elemento input, il campo testo si svuota e ci permette di scrivere il nostro.
Questo piccolo effetto molto carino si può implementare con qualche riga di javascript, vediamo come. Inanzitutto bisogna creare la funzione, ed inserirla prima della chiusura del tag head.

<script type="text/javascript">
function cambia(){
   var cont;
   cont= document.getElementById("cerca");
   cont.value=" ";
}
function out() {
 var cont;
   cont= document.getElementById("cerca");
   cont.value="Cerca nel sito...";
}
</script>

Il codice javascript è abbastanza semplice, inanzitutto abbiamo 2 funzioni: cambia() che verrà applicata quando clicchiamo dentro l’input e che cancella il testo presente, infatti nel campo cont.value=” “ notiamo che c’è solo uno spazio.
L’altra funzione out(), entrerà un funzione quando usciamo dall’input e clicchiamo altrove. Infatti qui il campo cont.value=”Cerca nel sito…” è il testo che vorremmo inserire.
Queste due funzioni permettono di agire sull’elemento che vogliamo tramite la ricerca dell’ID che gli indichiamo nel campo document.getElementById.
Ora possiamo recarci nel nostro input e attribuire l’ID che abbiamo scelto, e gli definiamo l’attributo value di default che vogliamo, che ovviamente sarà lo stesso utilizzato nella funzione out(), e gli indichiamo tramite onfocus e onblur le funzioni che deve svolgere, e quindi il codice html sarà così:

<input type="text" value="Cerca nel sito..." onfocus="javascript:cambia();" 
onblur="javascript:out();" id="cerca" />