In un articolo di non molto tempo fà vi avevo segnalato come integrare JQuery sulla vostra piattaforma Wordpress.

Si vabbè, direte voi, ma una volta che l’ho integrato che ci faccio. Una sua applicazione semplice e, allo stesso modo, pratica e interessante potrebbe essere quella che riguarda il focus in un form dati.

Questa demo vi chiarirà meglio di cosa sto parlando.

Dare un aiuto grafico e visivo all’utente che riempie un form dati (soprattutto nel caso fossero numerosi) è sempre importante anche perchè, occorre sempre ribadirlo, non tutti sono ‘navigatori’ esperti.

In tal caso ve la cavate davvero con poche righe di codice. Ma vediamolo in dettaglio.

HTML

Creiamo la struttura del form in html con i 3 campi :

Name




Age




Phone no.

CSS

Per applicare il focus al campo creiamo una classe semplice da applicare :

.focus {
	border: 2px solid #AA88FF;
	background-color: #FFEEAA;
}

JQUERY

E infine condiamo il tutto aggiugendo l’effetto desiderato con JQuery :

$('input[type="text"]').focus(function() {
	$(this).addClass("focus");
});

$('input[type="text"]').blur(function() {
	$(this).removeClass("focus");
});

Grazie a ViralPatel per lo spunto.