Evidenziatore di form

Stanchi di quei campi di form invariabilmente bianchi? Con i CSS è possibile modificare anche radicalmente l’apparenza di questi elementi. […]

Stanchi di quei campi di form invariabilmente bianchi? Con i CSS è possibile modificare anche radicalmente l’apparenza di questi elementi. Con lo script che presentiamo, invece, ci limiteremo ad intervenire con un piccolo ritocco. Fare in modo che cambi il colore di sfondo di un input quando esso riceve il focus, ovvero quando l’utente si porta con il cursore al suo interno. Non è solo un effettino senza costrutto, ma può diventare, con form lunghi e complessi, un buon ausilio per l’usabilità.

  • esempio.htm

## 1: LA SEZIONE JAVASCRIPT

Nella sezione <head></head> trova posto la parte fondamentale dello script. Si inizia con una variabile:

var highlightcolor=”red”

È l’unica parte dello script da personalizzare. ‘highlightcolor’ serve infatti a settare il colore che assumerà il campo input quando prende il focus. Si possono usare ovviamente anche i classici codici esadecimali.

Segue una serie di dichiarazioni atte a testare il supporto del DOM. Si giunge quindi alla funzione principale:

function highlight(e){
eventobj=ns6? e.target : event.srcElement
if (previous!=”){
if (checkel(previous))
previous.style.backgroundColor=”
previous=eventobj
if (checkel(eventobj))
eventobj.style.backgroundColor=highlightcolor
}
else{
if (checkel(eventobj))
eventobj.style.backgroundColor=highlightcolor
previous=eventobj
}
}

Quello che fa è catturare l’evento e impostare il colore di sfondo in base al valore della variabile vista sopra.

## 2: RICHIAMO INTERNO ALLA PAGINA WEB

La bellezza di questo script (oltre alla ottima compatibilità cross-browser) è la facilità di implementazione. Nel corpo della pagina, infatti, basterà aggiungere una semplice istruzione al tag <form>, senza dover intervenire quindi sui singoli campi:

<form onKeyUp=”highlight(event)” onClick=”highlight(event)”> <input type=”text” name=”text1″>
<input type=”text” name=”text2″>
<textarea>Area di testo</textarea> </form>

Il fatto di avere 2 eventi (onKeyUp e onClick) si spiega così. Si può passare da un campo all’altro e quindi dare il focus non solo con il mouse (onClick), ma anche con il tasto TAB (onKeyUp).