Valore di default nei campi di testo con JavaScript

È piuttosto frequente, nell'ambito di form HTML, imbattersi in campi di testo che presentano un valore di default preimpostato. In molti casi la scelta è dettata dalla volontà di rispettare quanto suggerito al punto di controllo 10.4 delle WCAG 1.0 (le linee guida in tema di accessibilità del W3C). Al riguardo, però, sembra opportuno riportare questo passo tratto dalla lezione 38 della Guida all'accessibilità di HTML.it curata da Michele Diodati:

Questa è una norma transitoria: viene cioè raccomandata la sua applicazione, solo finché i programmi utente in uso, tecnologie assistive comprese, non gestiranno correttamente i controlli vuoti.

Ma i programmi utente attualmente utilizzati, dai più datati browser grafici ai sintetizzatori vocali come Jaws, sono in grado di gestire correttamente anche i campi modulo vuoti. Continuare perciò a mettere del testo segnaposto all'interno dei campi, al solo scopo di favorire eventuali antiche tecnologie non conformi allo standard HTML, ci sembra diventato del tutto inutile. Per di più, la presenza di un testo da cancellare all'interno di un campo di immissione conduce ad una palese perdita di usabilità del modulo: molti utenti, infatti, dimenticano di cancellare il testo segnaposto, o lo cancellano parzialmente, e ciò finisce con l'invalidare inevitabilmente i dati che essi inoltrano.

Fonte: Moduli ad elevata accessibilità - II

L'uso del testo segnaposto è comunque suggerito anche per motivi che prescindono dall'accessibilità. In certi casi, purché il testo sia significativo, può aiutare a spiegare la funzione del campo di testo, suggerendo all'utente l'azione da compiere.

Rimane il problema evidenziato giustamente da Diodati: il testo di default può risultare scomodo da gestire. E non solo perché molti dimenticano di cancellarlo. Il semplice fatto di dover cancellare quanto presente nel campo prima di inserire il proprio testo è certamente fastidioso.

Javascript offre rispetto al problema fin qui definito una soluzione davvero semplice.

Partiamo da un campo di testo a cui si sia aggiunto un valore iniziale di default. Il codice HTML è questo:

Si ottiene questo risultato:

L'effetto che vogliamo ottenere è invece quello attivo sul campo seguente. Nel momento in cui il campo riceve il focus (quando cioè l'utente si porta con il cursore al suo interno, anche con il tasto TAB), il testo segnaposto viene eliminato automaticamente e sostituito con un nuovo valore di default equivalente ad una stringa vuota:

Tutto si ottiene aggiungendo al codice dell'elemento input una semplice istruzione. Il codice che ne risulta è il seguente: