skip to main | skip to sidebar
Code 18
Manuel du savoir-faire à l'usage des geeks et des curieux
RSS
  • Accueil
  • Le web au Québec
  • Liens
  • Twitter
  • Facebook
  • À propos

samedi 18 septembre 2010

Attribut autofocus en HTML 5

Publié par Infinite Loop, à 09 h 21 1 commentaire

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.


Tags: HTML

1 réponse à "Attribut autofocus en HTML 5"

  1. Cloé Perrotin a dit...
    29 août 2013 à 17 h 03

    merci pour cet article.

    je suis en formation et du coup l'autofocus on le regarde ainsi que tout le html5 qui je l'espère sera ok bientôt partout.

    mais si je trouve cette "option" efficace...je ne trouve pas une solution pour éviter que si le formulaire est en bas de page , l'autofocus n'oblige pas la page à s'afficher à cet endroit à son chargement o_O

    en tout cas merci !


Publier un commentaire

Message plus récent Messages plus anciens Accueil
S'abonner à : Publier des commentaires (Atom)
    Suivre @code18 sur Twitter

    Catégories

    • Apache (21)
    • Citations (167)
    • Club Vidéo (24)
    • Coffre à outils (56)
    • CSS (8)
    • Curiosités (117)
    • Design Pattern (2)
    • Drupal (8)
    • Easter Eggs (22)
    • Extensions Firefox (20)
    • GIMP (7)
    • Histoire (21)
    • HTML (32)
    • Humour (57)
    • Intégration (34)
    • iPod (12)
    • JavaScript (110)
    • Jeu de combat (6)
    • Le coin du geek (128)
    • Liens (12)
    • Linux (56)
    • Livres (78)
    • Lois et principes (46)
    • Marché des saveurs (26)
    • Mathématique (18)
    • Mobile (5)
    • Montréal (32)
    • Musique (112)
    • Pancartes et écriteaux (16)
    • Perl (8)
    • Pérou (1)
    • PHP (130)
    • PostgreSQL (44)
    • Programmation (105)
    • Saviez-vous que (55)
    • Sécurité (22)
    • SEO (5)
    • SQL Server (22)
    • Vieilles publicités (6)
    • Virtualisation (8)
    • Voyages (1)
    • Zend Framework (26)

    Divers

    Archives

    • ►  2015 (6)
      • ►  août 2015 (1)
      • ►  juillet 2015 (1)
      • ►  février 2015 (3)
      • ►  janvier 2015 (1)
    • ►  2014 (8)
      • ►  décembre 2014 (1)
      • ►  novembre 2014 (1)
      • ►  octobre 2014 (1)
      • ►  août 2014 (2)
      • ►  juillet 2014 (2)
      • ►  janvier 2014 (1)
    • ►  2013 (53)
      • ►  décembre 2013 (2)
      • ►  novembre 2013 (1)
      • ►  octobre 2013 (3)
      • ►  septembre 2013 (2)
      • ►  août 2013 (5)
      • ►  juillet 2013 (3)
      • ►  juin 2013 (5)
      • ►  mai 2013 (3)
      • ►  avril 2013 (7)
      • ►  mars 2013 (7)
      • ►  février 2013 (11)
      • ►  janvier 2013 (4)
    • ►  2012 (105)
      • ►  décembre 2012 (8)
      • ►  novembre 2012 (5)
      • ►  octobre 2012 (4)
      • ►  septembre 2012 (1)
      • ►  août 2012 (8)
      • ►  juillet 2012 (7)
      • ►  juin 2012 (7)
      • ►  mai 2012 (10)
      • ►  avril 2012 (13)
      • ►  mars 2012 (15)
      • ►  février 2012 (15)
      • ►  janvier 2012 (12)
    • ►  2011 (146)
      • ►  décembre 2011 (14)
      • ►  novembre 2011 (11)
      • ►  octobre 2011 (12)
      • ►  septembre 2011 (13)
      • ►  août 2011 (15)
      • ►  juillet 2011 (17)
      • ►  juin 2011 (18)
      • ►  mai 2011 (15)
      • ►  avril 2011 (9)
      • ►  mars 2011 (7)
      • ►  février 2011 (3)
      • ►  janvier 2011 (12)
    • ▼  2010 (398)
      • ►  décembre 2010 (29)
      • ►  novembre 2010 (28)
      • ►  octobre 2010 (32)
      • ▼  septembre 2010 (34)
        • Goo.gl peut générer des codes QR
        • Nous sommes les débris de Dieu
        • Programmer en français ?
        • Profession : artiste Lego
        • La balise Meter en HTML 5
        • Citation no. 100 sur la langue
        • Top 4 des chansons pour envoyer promener quelqu'un
        • Pénurie de robots
        • Lieux de tournage de films et séries télé
        • Utiliser l'API de Bit.ly avec PHP
        • Suivre l'activité d'un serveur PostgreSQL
        • Impossible veut dire 25 heures
        • Première expérience en géocaching
        • Citation no. 99 sur les voitures
        • Attribut autofocus en HTML 5
        • Générer un PDF en PHP
        • Géolocalisation avec HTML 5
        • Une surprise se cache à l'intérieur !
        • Survol de l'audio en HTML 5
        • Attribut placeholder sur input HTML 5
        • Citation no. 98 sur le journal
        • Facture d'ordinateur acheté en 1996
        • Recette de Dr Pepper
        • Combien se vendait un PC en 1989 ?
        • Symphonie à 1 bit de Tristan Perich
        • Les Invincibles : les esprits parlent le latin
        • Allez-vous tirer l'ours ou pas ?
        • Énigme : obtenir la somme de 82
        • Attention à l'heure d'été en programmation
        • Citation no. 97 sur la prison
        • Totalement inutile
        • Nouveaux contrôles HTML 5
        • Hiérarchie dans une entreprise
        • Bière Melon Head de Picaroons
      • ►  août 2010 (22)
      • ►  juillet 2010 (35)
      • ►  juin 2010 (42)
      • ►  mai 2010 (36)
      • ►  avril 2010 (37)
      • ►  mars 2010 (34)
      • ►  février 2010 (32)
      • ►  janvier 2010 (37)
    • ►  2009 (430)
      • ►  décembre 2009 (32)
      • ►  novembre 2009 (34)
      • ►  octobre 2009 (33)
      • ►  septembre 2009 (37)
      • ►  août 2009 (37)
      • ►  juillet 2009 (39)
      • ►  juin 2009 (38)
      • ►  mai 2009 (37)
      • ►  avril 2009 (35)
      • ►  mars 2009 (37)
      • ►  février 2009 (32)
      • ►  janvier 2009 (39)
    • ►  2008 (84)
      • ►  décembre 2008 (34)
      • ►  novembre 2008 (39)
      • ►  octobre 2008 (11)

    Abonnés

Copyright © All Rights Reserved. Code 18 | Converted into Blogger Templates by Theme Craft