DOM: svuotare un campo di ricerca da un testo di default cliccandoci dentro
Pubblicato il 8/5/2009 alle 10:22
Se in un campo di ricerca abbiamo previsto un testo di default, ad esempio “Cerca qui” o “Ricerca” o qualsiasi altro testo, possiamo prevedere anche che, cliccando dentro al campo, la scritta scompaia permettendo all’utente di digitare immediatamente senza doversi preoccupare di cancellare il testo di default.
Ottenere questa funzionalità è semplicissimo:
<input type=”text” id=”ricerca” value=”Cerca qui…” onclick=”javascript:svuota()” />
L’evento onclick sul campo di ricerca richiama la funzione svuota():
<script type=”text/javascript”>
function svuota() {
document.getElementById(“ricerca”).value=”";
}
</script>
La funzione JS determina, tramite DOM, lo “svuotamento” agendo sull’attributo value. Qui lo script in azione.
Tweet
Invia questo articolo a un amico via email
Incredibile..abbiamo fatto un post uguale nello stesso giorno e quasi alla stessa ora!
Incredibile, non ho ancora letto i feed e non avevo ancora visto il tuo articolo.
Notevole quanto siamo in sintonia, peccato per te che sono etero e già fidanzato
A parte gli scherzi, l’ispirazione è venuta anche a te dal campo di ricerca di Facebook?
No, l’ispirazione mi è venuta dal campo di ricerca personalizzate di Google..
Senza nulla togliere, andrebbe bene anche in questo modo più rapido:
<input type="text" value="Cerca qui…" onclick="this.value=''" />Addirittura, per eliminare il testo anche tramite tastiera:
<input type="text" value="Cerca qui…" onfocus="this.value=''" />Assolutamente, eliminare il testo sul focus tramite tastiera è anzi doveroso