Vous êtes ici : Accueil du blogjQuery » Un fix jQuery pour utiliser placeholder sur IE8/IE9

Un fix jQuery pour utiliser placeholder sur IE8/IE9

L’attribut HTML5 placeholder permet d’afficher un texte explicatif dans un champ de formulaire afin de guider l’utilisateur dans sa saisie. Un peu comme si l’on indiquait une valeur par défaut, sauf qu’avec placeholder le texte s’efface / s’affiche automatiquement lors du focus / blur.

Voir la démo

Placeholder c’est sémantique, ergonomique et facile à implémenter, sa syntaxe se résumant à l’utilisation de l’attribut placeholder sur un champ input ou textarea :

<input type="text" placeholder="Texte explicatif"/>

Le seul souci de la fonctionnalité, c’est son support. Et plus précisément sur IE8 et IE9, placeholder n’étant compatible qu’à partir de la version 10.

Heureusement, des solutions en javascript existent pour palier à ce problème. Voici ma préférée (condition trouvée sur ce post, fix cross-browser adapté de cet article) :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
	$(document).ready(function() {

		// Si le navigateur ne prend pas en charge le placeholder
		if ( document.createElement('input').placeholder == undefined ) {

			// Champ avec un attribut HTML5 placeholder
			$('[placeholder]')
				// Au focus on clean si sa valeur équivaut à celle du placeholder
				.focus(function() {
					if ( $(this).val() == $(this).attr('placeholder') ) {
						$(this).val(''); }
				})
				// Au blur on remet le placeholder si le champ est laissé vide
				.blur(function() {
					if ( $(this).val() == '' ) {
						$(this).val( $(this).attr('placeholder') ); }
				})
				// On déclenche un blur afin d'initialiser le champ
				.blur()
				// Au submit on clean pour éviter d'envoyer la valeur du placeholder
				.parents('form').submit(function() {
					$(this).find('[placeholder]').each(function() {
						if ( $(this).val() == $(this).attr('placeholder') ) {
							$(this).val(''); }
					});
				});
		}	

	});
</script>

D’autres conditions possibles pour tester le support du placeholder :

  • La condition suivante est sans aucun doute plus performante que la précédente, mais elle implique l’utilisation des classes conditionnelles :

    <!DOCTYPE html>
    <!--[if IE 8]><html class="lt-ie10 lt-ie9"><![endif]-->
    <!--[if IE 9]><html class="lt-ie10"><![endif]-->
    <!--[if gt IE 9]><!--><html><!--<![endif]-->
    
    if ( $('html').is('.lt-ie10') ) { // IE < 10
    	// Fix placeholder pour IE8 et IE9
    }
    
  • Si vous utilisez Modernizr :

    if ( !Modernizr.input.placeholder ) { // Navigateur ne prenant pas en charge placeholder
    	// Fix placeholder
    }
    

Et enfin, cet article ne serait pas complet sans quelques pistes pour styler le placeholder en CSS :

Commentaires (2)

Lâcher un com'

  1. Mathieu
    04 février 2015 à 17h44

    J’ai opté pour la première solution en JQuery en copiant / collant le script : ça fait ce qui est attendu, nickel ;)

  2. webludi
    04 septembre 2015 à 08h56

    Bonjour
    super info, j’ai fait comme Mathieu, un copier coller du script et c’est top.
    un grand merci

Laisser un commentaire

Balises HTML autorisées dans la rédaction du message :
<strong> <a> <code> <q>

Les champs marqués d'une étoile sont obligatoires.

Current month ye@r day *