Hints su campi modulo con CSS e JavaScript

25 Set

Out Of Date Warning

Questo post è stato pubblicato più di 2 anni fa (il 25 settembre 2011). Le idee vanno avanti velocemente, le prospettive cambiano quindi i contenuti potrebbero non essere aggiornati. Ti prego di tenere in considerazione questo, e di verificare le informazioni tecniche presenti nell'articolo prima di farne affidamento per i tuoi scopi.

Voglio mostrarvi una tecnica molto semplice che ho usato giorni fa per mostrare degli hint box sui campi di un modulo. Non ho voluto utilizzare di proposito nessun framework nè tantomeno pluigin aggiuntivo ma semplicemente i CSS e JavaScript (come vedremo bastano veramente poche righe di codice).

Con un po’ di dispiacere noto che ultimamente con l’avvento dei vari framework si sta perdendo l’abitudine di usare JavaScript puro anche per le cose più banali. Spesso non vale la pena di scomodare jQuery o Prototype per ottenere dei risultati relativamente semplici da realizzare anche direttamente con JavaScript.

Per hint box intendo dei suggerimenti che verranno visualizzati al momento il cui il campo acquisirà il focus per poi scomparire quando lo perderà. In particolare nel nostro esempio gli hints verranno visualizzati a destra del campo di input e conterranno indicazioni riguardo la sua valorizzazione.

JavaScript

Partiamo dalla parte JavaScript; con una funzioncina di 3 righe otteniamo il risultato. Questa ogni volta che viene chiamata cambierà il valore della proprietà display della classe di stile del primo span successivo all’elemento che la chiama da inline a none e viceversa:

CSS

Da notare che la classe hint avrà la proprietà display settata su none in quanto tutti i suggerimenti in partenza dovranno essere nascosti, e che con un corretto uso della proprietà left sulla classe hint-pointer riesco a dare l’effetto puntatore sull’hint.

HTML

Infine l’HTML, qua c’è veramente poco da spiegare, una semplice form con dei campi, a destra dei quali vado a mettere i mie suggerimenti all’interno di uno span con classe hint. Aggiungerò infine la chiamata alla funzione hint sugli eventi onfocus ed onblur dei campi del modulo.

Live Demo

live demo

2 Commenti su “Hints su campi modulo con CSS e JavaScript”

  1. andrea 2 ottobre 2012 at 16:12 #

    ciao sarebbe possibile avere una versione scaricabile perchè ho un problema con il codice.
    in pratica pur mettendo display:none nello stile di span.hint, mi mostra i suggerimenti al caricamento della pagina e li toglie una volta che clicco all’interno e dopo clicco su quello successivo.
    grazie.
    ciao.

Lascia un commento