Placeholder : Tout savoir sur cet Attribut HTML5

Le Placeholder est un nouvel attribut HTML5 qui a pour but de décrire brièvement un champs. La valeur du Placeholder s’affiche à l’intérieur du champs lorsque celui-ci est vide.

Voici ce que ça donne sur les principaux navigateurs :

Pour l’utiliser il suffit d’insérer l’attribut placeholder dans une balise input ou textarea. Cela fonctionne pour les champs de type text, password, mais aussi les nouveaux types d’input HTML 5 à savoir : search, url, tel, email.

Voici un exemple simple d’intégration:

<input type="text" placeholder="rechercher..." />

Compatibilité navigateur

Comme d’habitude le Placeholder est supporté par tous les navigateurs récents… à l’exception d’Internet Explorer. Pour être plus précis voici les versions minimales de support :

• Firefox 4.0+
• Opera 11.01+
• Chrome 3.0+
• Safari 3.0+
• Internet Explorer 10+

Rendre son Placeholder compatible via jQuery

En attendant Internet Explorer 10, il est donc nécessaire d’utiliser jQuery, si l’utilisation du placeholder est importante.

La meilleure solution que j’ai pu trouver est celle de Nico Hagenburger qui a pour avantage d’ajouter une classe .placeholder sur le champs mais aussi de vider ce champs avant la soumission du formulaire. Voici le code en question:

$('[placeholder]').focus(function() {
   var input = $(this);
   if (input.val() == input.attr('placeholder')) {
      input.val('');
      input.removeClass('placeholder');
   }
}).blur(function() {
   var input = $(this);
   if (input.val() == '' || input.val() == input.attr('placeholder')) {
      input.addClass('placeholder');
      input.val(input.attr('placeholder'));
   }
}).blur().parents('form').submit(function() {
   $(this).find('[placeholder]').each(function() {
      var input = $(this);
      if (input.val() == input.attr('placeholder')) {
         input.val('');
      }
   })
});

Style CSS du Placeholder

L’attribut Placeholder peut être stylé en CSS un peu à la manière de l’attribut :hover

input::-webkit-input-placeholder { color: #999; }
input:-moz-placeholder { color: #999; }
/* A tester pour IE10, mais logiquement: */
input:-ms-placeholder { color: #999; }

Il est aussi possible de styler un élément précis, comme d’habitude en CSS :

#my_field::-moz-placeholder { color:#999; }

Si vous utilisez la méthode jQuery fournie précédemment, l’élément peut alors être stylé simplement comme ceci :

#my_field.placeholder { color:#999; }