Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Input 'intelligente'

Link copiato negli appunti

Quella descritta in questo script è una pratica che sta decisamente prendendo piede e che dimostra come un uso accorto di Javascript possa certamente migliorare l'usabilità generale di un sito. Si applica tra l'altro ai form, forse l'elemento di cui si deve tenere conto in fase di progettazione, visto che è destinato più di altri all'interazione con l'utente.

Cosa fa lo script? Si parte da un normale campo di testo. È una buona norma, suggerita anche nelle raccomandazioni in tema di accessibilità del W3C, inserire un valore di default (tramite l'attributo 'valuè) che suggerisca in qualche modo l'utilizzo. Per esempio, se l'input è destinato al motore di ricerca del sito, sarà opportuno partire con una frase tipo 'Inserisci la parola che vuoi cercarè, o qualcosa di simile.

Nasce a questo punto un problema. Al momento di dover inserire il proprio testo, l'utente dovrà prima cancellare quello di default. Per rendere più semplice l'operazione, lo script fa in modo che il testo in questione scompaia non appena il campo di testo riceve il focus. La visualizzazione dell'esmepio allegato renderà tutto più chiaro e comprensibile.

  • esempio.htm

## 1: LA SEZIONE JAVASCRIPT

Non ci sono in effetti sezioni JS ad hoc da incorporare nella pagina. Tutto il codice Javascript necessario va associato infatti al codice HTML con cui definiamo il campo di testo. Ecco quello dell'esempio:

<input type="text" id="email" value="Inserisci l'indirizzo e-mail" size="25" onfocus="if (this.value=='Inserisci l'indirizzo e-mail'){this.value='';};return false;" onblur="if (this.value==''){this.value='Inserisci l'indirizzo e-mail';return false;}">

Per una implementazione veloce nei vostri progetti vi basterà sostituire la frase 'Inserisci l'indirizzo e-mail' con quella che fa al caso vostro, badando ad effettuare la sostituzione per tutte le ricorrenze della frase stessa.

Ti consigliamo anche