Categorie
JavaScript

Hints su campi modulo con CSS e JavaScript

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:

function hint(el){
	var mioSpan = el.parentNode.getElementsByTagName("span")[0];
	if (mioSpan.style.display == "inline") mioSpan.style.display = "none";
  	else mioSpan.style.display = "inline";
}

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.

span.hint {
  background:#FFFFCC url('img/Information-32.png') no-repeat top left;
  color:#444;
  border:1px solid #CC9933;
  padding:5px 5px 5px 40px;
  width:250px;
  position:absolute;
  margin: -12px 0 0 14px;
  display:none;
  min-height:30px;
  font-size: 12px;
}
span.hint .hint-pointer {
  position: absolute;
  left: -10px;
  top: 5px;
  width: 10px;
  height: 19px;
  background: url('img/pointer.gif') no-repeat left top;
}

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.

Suggerimento 1. 
Suggerimento 2. 
Suggerimento 1. 

Live Demo

live demo

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

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

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.