Corsi on-line

L’elemento Autofocus di HTML5

HTML5 introduce tra i suoi elementi l’interessante attributo denominato Autofocus, esso si rivela particolarmente utile perché sostituisce JavaScript in alcune operazioni che precedentemente potevano essere effettuate soltanto attraverso il noto linguaggio per lo scripting Client Side; un contesto applicativo di tale elemento è rappresentato dai form, si pensi per esempio al motore di ricerca di Google nella cui home page il cursore viene immediatamente posizionato sul form per le query al momento del caricamento.

Chiaramente l’attributo Autofocus risulterà particolarmente efficace in campi destinati agli input testuali, come per esempio textfield e textarea, perché previene l’esecuzione di operazioni manuali da parte dell’utente; nell’esempio seguente l’elemento viene utilizzato per il posizionamento automatico del cursore su un semplice box per le ricerche:

<form>
<input id="modulo_ricerca" autofocus>
<input type="submit" value="Cerca">
</form>

Purtroppo, attualmente Autofocus non gode dello stesso livello di supporto da parte di tutti i browser più diffusi, per cui la possibilità o meno del suo utilizzo potrà essere verificata in modo univoco soltanto attraverso JavaScript, per esempio introducendo un breve script come il seguente d0po il form:

<script>
 if (!("autofocus" in document.createElement("input")))
 {
     document.getElementById("modulo_ricerca").focus();
 }
 </script>

In questo modo, nel caso in cui l’attributo HTML5 citato non sia supportato dal programma per la navigazione corrente, sarà JavaScript a proporre la sua stessa funzione; certo, l’utilizzo di JS in luogo di un elemento creato proprio per non dover ricorrere allo scripting sembra (e forse è) per sua natura contraddittorio, ma si tratta di una necessità legata al supporto cross browser per i nuovi standard (parliamo in particolare di Internet Explorer) e non certo alle capacità dello sviluppatore.

Post correlati
I più letti del mese
Tematiche