Evidenziare il focus sui campi dei form

Un form usabile è un form che aiuta l’utente nella compilazione fin nei minimi dettagli. Uno dei dettagli importanti spesso trascurati è il focus sui campi.

L’evento focus su un elemento del form è quell’evento che si attiva nel momento in cui il campo diventa “attivo”; nel caso di una textarea o di un campo di input, ad esempio, si verifica l’evento focus nel momento in cui il campo diventa compilabile. L’evento opposto al focus è l’evento blur che, ovviamente, si verifica nel momento in cui il campo non è più attivo.

È buona norma gestire questo evento sui nostri form in maniera da consentire all’utente di comprendere senza dubbi quale campo sta compilando in un determinato momento. Le operazioni che si possono compiere per evidenziare il focus sui campi sono molte, generalmente si tende a colorare in maniera differente il bordo dell’elemento, il colore e/o la dimensione del testo in esso contenuto e, a volte, anche il background.

Nei browser moderni gestire l’evento focus è molto semplice; si può realizzare il tutto semplicemente con i CSS attraverso il selettore :focus richiamato sull’elemento.

input:focus {
  border: 1px solid #dcdcdc;
  color: #222;
}

Riprendendo il form realizzato nella lezione su come assegnare stili ai campi di input, vediamo come gestire l’evento focus sui campi di input e sulla textarea:

/* Focus sui campi */
input:focus, textarea:focus {
  border: 1px solid #FCA800; /* bordo degli elementi */
  color: #FCA800;            /* colore del testo     */
}

Nel codice precedente abbiamo utilizzato un’unica regola applicando il selettore :focus a tutti gli elementi di tipo input e sulla textarea.

Possiamo vedere subito l'esempio.

Compatibilità con Internet Explorer

Purtroppo Internet Explorer, fino alla versione 7, non supporta il selettore ed abbiamo la necessità di ricorrere al Javascript per questi browser. In questo esempio, per comodità, utilizzeremo il framework jQuery ma lo stesso effetto è realizzabile anche con Javascript puro o altri framework.

Per prima cosa creiamo una classe CSS chiamata focus che aggiungeremo alla regola precedente. A questo punto la regola CSS diventa:

/* Focus sui campi */
input:focus, textarea:focus, .focus {
  border: 1px solid #FCA800; /* bordo degli elementi */
  color: #FCA800;            /* colore del testo     */
}

A questo punto inseriamo un commento condizionale per Internet Explorer versione 7 ed inferiori in cui andiamo ad eseguire il codice Javascript:

<!--[if lte IE 7]>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $('input,textarea').focus(function(){
        $(this).addClass('focus');
    });
    $('input,textarea').blur(function(){
        $(this).removeClass('focus');
    });
});
</script>
<![endif]-->

L'esempio completo è disponibile su questa pagina.