Après avoir testé pas mal de méthodes pour mettre en place des indications de saisie dans les champs de formulaire (type texte), je n'étais jamais vraiment satisfait du résultat :

  • technique de déplacement du label : pose problème au rafraichissement de la page,
  • modification de l'attribut value que je considère comme un détournement de l'attribut value pas prévu pour,
  • et je ne sais combien d'autres techniques encore...

Voici une méthode pour le faire en javascript (avec jquery) que je trouves assez élégante même si elle n'est pas parfaite à l'heure actuelle.

Commençons par le script :

jQuery(document).ready( function(){
	jQuery('input[placeholder]').each( function(i,e){
		if(jQuery(this).val() == '') {jQuery(this).val(jQuery(this).attr('placeholder'))};
	});
	jQuery('input[placeholder]').focus( function(){ 
		if(jQuery(this).val() == jQuery(this).attr('placeholder')) {
			jQuery(this).val('').addClass('noPlaceHolder');
		};
	});
	jQuery('input[placeholder]').blur( function(){ 
		if(jQuery(this).val() == '') {jQuery(this).val(jQuery(this).attr('placeholder')).removeClass('noPlaceHolder');};
	});
});

Et le code HTML nécessaire pour que le script s'applique :

<input type="text" id="phone" name="phone" placeholder="ex : 01 02 03 04 05" />

Et voilà un exemple de ce que l'on obtient avec un champ téléphone comme exemple :



Les côtés intéressants de cette technique sont que :

  • La méthode est prête pour HTML 5 ce qui permettra de palier les manques de certains navigateurs qui ne l'auront pas encore mis en place (qui a dit Internet explorer ? c'est pas fair play !)
  • La méthode reproduit exactement le comportement d'un placeholder, il y a même une classe CSS "noPlaceHolder" pour changer la couleur du texte pendant la saisie, et vous pouvez modifier la couleur du texte des champs avec un placeholder via les feuilles de style.
  • Elle est accessible pour les machines ou aides techniques qui supporte déjà cet attribut (comme l'iphone).

Les points négatifs, ou améliorables :

  • utilise un attribut HTML qui n'existe pas encore donc invalide le code.
  • rafraîchir la page pendant la saisie des champs en cours de la couleur du texte "placeholder" et non de la couleur du texte en cours de saisie (pas trop compliqué à corriger à priori).

Il est à noter néanmoins qu'il est possible d'utiliser un autre attribut comme title afin d'être valide et accessible dès aujourd'hui.

Je vous met le script en téléchargement en pièce jointe, pour le reste faite un copier coller du code HTML plus haut ;)