Personalizzare il colore di background agli elementi form con javascript

Abbiamo visto quello che si può ottenere con il solo aiuto dei CSS, come sempre presenti nei miei tutorial, ma per l' articolo in questione ci avvarremo anche di pochissimo codice JavaScript.

Quale è lo scopo di questa applicazione? All' apertura della pagina web avremo un form con all' interno dei campi di testo ed una textarea. Quando cliccheremo in una casella di testo, essa cambierà colore. Quando lasceremo quella input-box e metteremo il puntatore del mouse in un' altra, sarà la seconda a ricevere il :focus, cioè lo stato attivo, mentre la prima tornerà ad avere il colore iniziale. In altri articoli ho descritto come fare per realizzare un form con i CSS, quindi salterò questa parte, dando per scontato che sia stato chiaro per questo passaggio, e passo direttamente al codice JavaScript.

Il codice JavaScript nella pagina

Il codice che ci permetterà di cambiare colore di sfondo alle text-box del form, verrà posizionato tra i tag <head> e </head> della pagina html e la sua sintassi è:

<script type="text/javascript">
function sel(id) {
if (!document.getElementById) return;
selDiv = document.getElementById(id);
selDiv.style.backgroundColor = "#ffc";
}
function des(id) {
if (!document.getElementById) return;
selDiv = document.getElementById(id);
selDiv.style.backgroundColor = "#fff";
}

Questo è tutto quello che serve. Ma adesso passiamo a spiegare quello che queste poche righe di codice eseguiranno. Per prima cosa ho evidenziato in grassetto le due funzioni che assolveranno al compito della nostra applicazione in oggetto. Esse sono una di selezione function sel(id) e l' altra di deselezione function des(id).
Utilizzeremo il DOM, che ha una sintassi molto simile al JavaScript. Il DOM descrive la struttura di un documento html, attraverso il quale si può accedere a tutti gli elementi della pagina stessa, oltre che manipolarli. A noi interessa, in particolar modo, un metodo di document, [ elemento principale ].

I metodi si dividono tra quelli che si occupano di recuperare elementi nella pagina e metodi che sono utilizzati nella creazione di altri elementi. Ci occuperemo dei primi, cioè getElementById(). Questo metodo permette di recuperare l' elemento caratterizzato dal valore (unico) del proprio attributo ID. In particolare restituisce un riferimento all' elemento in questione. Domanda: quali saranno i nostri elementi con un unico ID nella pagina? Tutti gli elementi che compongono il form, ovviamente. Ognuno di essi ha, un unico ID che lo contraddistingue da un altro. Non potremo avere, quindi, due elementi con lo stesso "nome". Torniamo alla nostra funzione; al primo rigo abbiamo:

if (!document.getElementById) return; 

Si accerta che nella pagina [ document ] ci sia un elemento con un unico ID. Al secondo rigo abbiamo:

selDiv = document.getElementById(id);

Alla variabile selDiv è stato assegnato quanto descritto su, cioè recuperare l' elemento con il valore unico. Al terzo rigo:

selDiv.style.backgroundColor = "#ffc"

Viene assegnato il colore di sfondo con valore esadecimale "#ffc", cioè un giallo molto tenue. Capito il meccanismo di questa prima funzione, risulta facile costruire quella che deve ridare un altro colore (in questo caso il bianco), quando allontaniamo il mouse da un elemento. Come si può vedere, cambia solo il valore del colore.

Richiamare il codice JavaScript nella pagina html

Come fare per far funzionare tale codice associato ad un campo di testo? Supponiamo di avere una text-box nella quale dobbiamo inserire il nome. La sua etichetta [ label ] è proprio "Nome". Con quale valore unico [ ID ] posso distinguere questo elemento da un altro, nella pagina? Vediamo il codice:

<input type="text" id="n" onfocus="sel('n')"  onblur="des('n')" />

Credo che non ci sia bisogno di molta spiegazione, o no? Per una maggiore comodità sarebbe meglio IDentificare con una lettera la casella di input e che non deve apparire in nessun'altra parte della pagina. Fatto questo, non ci resta che richiamare le due funzioni attraverso il gestore di eventi onfocus, cioè rendere attivo un oggetto. L' opposto gestore di eventi è onblur [quando si deseleziona quell' elemento]; di conseguenza perde lo stato attivo per essere trasferito su un altro elemento. Per chiarire meglio il tutto ho preparato una pagina di esempio nella quale sono presenti tre campi di testo ed una textarea. Provare a fare click su ognuno di essi per veder cambiare il colore di background.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati