{"id":1053,"date":"2010-02-01T17:20:18","date_gmt":"2010-02-01T15:20:18","guid":{"rendered":"http:\/\/nyams.planbweb.com\/blog\/?p=1053"},"modified":"2010-02-01T17:20:18","modified_gmt":"2010-02-01T15:20:18","slug":"lattribut-placeholder-de-html5","status":"publish","type":"post","link":"https:\/\/nyamsprod.com\/blog\/lattribut-placeholder-de-html5\/","title":{"rendered":"L’attribut placeholder de html5"},"content":{"rendered":"
\n

Attention:<\/strong> Les informations de ce billet sont susceptibles d'être obsolètes car vieux de plus 2 ans.<\/p>\n

Warning: <\/strong> The information you are reading may be obsolete, this post was published more than 2 years ago.<\/p>\n<\/div>

Comme vous le savez sans aucun doute le <\/strong>html5 <\/strong><\/em>c’est le nouvel <\/strong>Ajax<\/strong><\/em>, mais lui,\u00a0 il lave encore plus blanc que blanc \ud83d\ude42 .<\/strong> Non plus s\u00e9rieusement, je vais vous pr\u00e9senter un nouvel attribut assez int\u00e9ressant et dont vous ne pourrez sans doute plus vous passer dans les ann\u00e9es \u00e0 venir: l’attribut placeholder<\/em>.
\nCette attribut, tout le monde le connait et l’a d\u00e9j\u00e0 implant\u00e9 dans l’un ou l’autre de ses sites sans m\u00eame le savoir. Son utilisation qui n’est pas obligatoire et toute de m\u00eame assez importante. Il sert \u00e0 montrer du texte d’information dans un champs de formulaire. Ce texte, lorsqu’on clique sur le champs auquel il appartient, disparait et vous laisse remplir le champs avec le contenu que vous avez r\u00e9ellement envie d’envoyer. Cette technique est largement utilis\u00e9e de nos jours pour montrer une information permettant le remplissage plus appropri\u00e9 d’un formulaire. Mais avec l’attribut placeholder<\/em>, tout est g\u00e9r\u00e9 par le Navigateur et non via javascript.<\/p>\n

la bonne nouvelle, c’est que l’attribut placeholder <\/em>est d\u00e9j\u00e0 implant\u00e9 dans Webkit <\/em>et, de fait, il fonctionne d\u00e9j\u00e0 dans les derni\u00e8res versions de Safari <\/em>et de Chrome <\/em>(Chrome 4 si j’ai tout bien compris). la mauvaise nouvelle, c’est qu’en dehors de Webkit <\/em>personne ne le comprends… encore. Mais cela n’est pas grave, gr\u00e2ce au javascript <\/em>et au code qui suit ci-dessous, vous allez pouvoir rem\u00e9dier \u00e0 ce probl\u00e8me de IE6 <\/em>(beuuuh) \u00e0 FF 3.6 <\/em>en passant m\u00eame par la pr\u00e9-build de Opera <\/em>10.5, c’est pour dire.<\/p>\n

Je tiens \u00e0 pr\u00e9ciser que pour la rapidit\u00e9 de codage et parce que tout le monde l’aime bien j’ai utilis\u00e9 jQuery <\/em>dans sa version la plus r\u00e9cente la 1.4.1 . Mais pour les nostalgiques et les ringards comme moi, il est tout \u00e0 fait possible d’\u00e9crire ce code sans utiliser de framework. D’ailleurs cela serait un tr\u00e8s bon exercice pour ceux d’entres vous qui se disent guru en javascript \ud83d\ude09 .<\/p>\n

Voici le code utilis\u00e9 :<\/p>\n

jQuery(function($){\n \/\/fontion de verification par object detection que le navigateur comprend ou non l'attribut placeholder\n var isPlaceholderSupported = function () {\n var o = document.createElement('input');\n return 'placeholder' in o;\n };\n \/\/si il ne le comprends pas alors on sevit\n if (!isPlaceholderSupported()) {\n     var togglePlaceholderText = function (el) {\n         var color = '#999', v = $.trim(el.val()), p = el.attr('placeholder');\n         if (v == '') {\n             el.val(p);\n             el.css({'color':color});\n        } else if (v == p) {\n            el.val('');\n            el.css({'color':''});\n         }\n     };\n     $('input[placeholder]')\n      .each(function(){togglePlaceholderText($(this));})\n      .click(function(){togglePlaceholderText($(this));})\n      .blur(function(){togglePlaceholderText($(this));})\n      .closest('form').submit(function(){$(this).find('input[placeholder]').each(function(){togglePlaceholderText($(this));})});\n    }\n});<\/pre>\n
Et parce que vous m’\u00eates sympathique, la page d’exemple qui va avec<\/a>. Attention <\/strong>d’autres nouveaut\u00e9s assez int\u00e9ressantes du html5 ont \u00e9taient utilis\u00e9es pour encore plus \u00e9picer le code… les d\u00e9couvrirez-vous ???<\/em><\/p>\n
Enfin, notez que mon code :<\/p>\n
    \n
  1. s’assure de ne pas soumettre la valeur de l’attribut placeholder <\/em>dans le cas o\u00f9 le formulaire et soumis avec le champs ayant pour valeur celle de son attribut placeholder<\/em>.<\/li>\n
  2. ne fonctionne QUE dans le cas o\u00f9 le navigateur ne g\u00e8re pas encore l’attribut placeholder<\/em>. Wouahhh comment tu fais ? Tu d\u00e9tectes le navigateur alors? Non jeune padawan.. je fais de l’Object Detection \ud83d\ude09 .<\/li>\n<\/ol>\n
    A bon entendeur\/lecteur\/codeur .. je vous salue!!<\/p>\n","protected":false},"excerpt":{"rendered":"
    Utilisation de l’attribut placeholder de html5 pour g\u00e9rer l’affichage d’information compl\u00e9mentaire pour certains champs de formulaire.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[5],"tags":[31,206,220,256,396,417,427,536,567],"class_list":["post-1053","post","type-post","status-publish","format-standard","hentry","category-web","tag-ajax","tag-formulaire","tag-gecko","tag-html5","tag-object-detection","tag-placholder","tag-presto","tag-trident","tag-webkit"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts\/1053","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/comments?post=1053"}],"version-history":[{"count":0,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts\/1053\/revisions"}],"wp:attachment":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/media?parent=1053"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/categories?post=1053"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/tags?post=1053"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}