Attribut autofocus en HTML 5

Je poursuis mon expérimentation du HTML 5 malgré une discussion à mon travail où il était question de savoir si on devait commencer à exploiter ou non les fonctionnalités offertes par la nouvelle mouture du markup. Avec les chiffres indiquant que les fureteurs ne sont définitivement pas prêts et que l'utilisateur traîne toujours à mettre son navigateur à jour, la conclusion qu'on en a tiré est qu'il est encore trop tôt et que ce serait inconcevable d'imposer un navigateur à la masse à moins de développer dans un environnement fermé comme pour le iPad.

En attendant, il ne faut pas se laisser freiner par ces contraintes et on se doit comme développeur d'aller de l'avant pour se préparer à ce qui s'en vient. Wired annonçait récemment que le web était mort parce que la portion web des Internets perdait du terrain face à la vidéo, aux P2P et surtout aux applications spécialisées (iPhone) tirant profit du réseau sans passer par un fureteur. Qui sait si le HTML5 ne sera pas l'élément déclencheur qui repropulsera à nouveau le web au somment avec son expérience enrichie ? Pour un développeur comme moi, j'apprécie les arguments techniques mais pour Monsieur Madame Tout-le-monde, il en a rien à foutre du langage ou de la technologie qui se cache derrière, il veut quelque chose qui fonctionne.

Je vais m'arrêter pour ne pas transformer ce billet en réflexion sur l'avenir du web et je vais me concentrer sur ce dont je voulais réellement parler, une fonctionnalité toute simple, une légère amélioration introduite dans les formulaires HTML5 : l'attribut autofocus.

Du côté ergonomique, la page d'accueil de Wikipedia ou Google place automatiquement le curseur dans la boîte de recherche pour permettre à l'utilisateur de saisir immédiatement les mots clés sans avoir à cliquer sur la boîte pour lui donner le focus. Historiquement, on devait le faire par JavaScript à l'initialisation de la page :

$(document).ready(function(){
 $('#search').focus();
});

Ou comme Google, sur le onload de la balise Body :

body onload="try{!google.j.b&&document.f.q.focus()}catch(e){};...

En HTML 5, il suffit de remplacer le JavaScript par l'attribut HTML autofocus sur le champ de saisie :

<input type="text" name="q" autofocus>

C'est tout ce qu'il y a à faire. À noter que contrairement au XHTML, il n'est pas nécessaire ici d'inscrire l'attribut avec une valeur comme autofocus="autofocus".

Conclusion du billet : 80% de réflexion, 20% de code.