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.
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 :
- Sur tous les navigateurs (et IE à partir de sa version 10),
- Sur IE8 et IE9 (besoin d'une classe CSS gérée dynamiquement par le script).
Commentaires (2)
Lâcher un com'
J’ai opté pour la première solution en JQuery en copiant / collant le script : ça fait ce qui est attendu, nickel ;)
Bonjour
super info, j’ai fait comme Mathieu, un copier coller du script et c’est top.
un grand merci
Laisser un commentaire