Il est question ici du texte qui est affiché lorsqu’une zone de texte est vide et disparaît lorsque cette zone est sélectionnée ou si elle contient du texte.
Il existe plusieurs solutions sur le web mais la majorité du temps ça consiste à modifier la valeur de la zone de texte. Ceci cause un problème pour les lecteurs d’écran car l’indice ne sera pas lu comme un texte d’aide tel un label html mais plutôt comme la valeur de la zone de texte. En plus ces solutions demandent une gestion supplémentaire de la valeur de la zone de texte lorsque le formulaire est soumit au serveur.
En html5 ce problème sera résolu avec l’attribut placeholder. Voici un exemple avec placeholder.
Par contre voici, pour l’instant, une alternative qui utilise un label html pour créer l’indice sur la zone de texte.
Le fonctionnement
Le principe est simple. Il suffit de déplacer le label html par dessu la zone de texte. Lorsque la zone est sélectionnée l’indice est caché. Quand la zone perd sa sélection et que celle-ci est vide on ré-affiche l’indice.
Puisqu’un clique sur le label sélectionne la zone de texte il n’est pas nécessaire de gérer le clique sur le label.
Le code
Html
<div>
<label for="emailName">Nom</label>
<input type="text" id="emailName" />
</div>
<div>
<label for="emailaddress">Adresse</label>
<input type="text" id="emailaddress" />
</div>
Javascript (jQuery) et Explications
$("label").each(function () {
//Aller chercher le label et la boîte de texte
var lbl = $(this);
var inputText = $("#" + lbl.attr("for"));
//Créer un conteneur "DIV" qui permettra de positionner correctement le label et la zone de texte
var textboxDivWrapper = $("<div></div>");
textboxDivWrapper.css("position", "relative");
textboxDivWrapper.css("display", inputText.css("display"));
inputText.wrap(textboxDivWrapper);
inputText.before(lbl);
lbl.css("position", "absolute");
lbl.css("left", "0");
//Un peu d'esthétisme
lbl.css({ "color": "#888", "padding": "2px 0px 0px 10px" });
//Simuler du texte lors du "mouse-over" sur le label
lbl.css("cursor", "text");
//Utilisé "left: "-9999" au lieu du "hide()" : Afin que les lecteurs d'écran puisse dicter l'indice.
//La méthode "hide()" à pour résultat d'assigné "display: none" ce qui à pour effet
// de cacher l'indice autant pour le visuel que pour les lecteurs d'écran.
// Donc dans le but que l'indice puisse être lu par les lecteurs d'écran
// il faut simplement sortir le label de l'écran.
inputText.focus(function () {
lbl.css("left", "-9999");
});
inputText.blur(function () {
if ($(this).val().length == 0) {
lbl.css("left", "0");
}
});
});
Plugin jQuery
Voici le même code javascript en version plugin jQuery.
(function ($) {
$.fn.labelToHint = function (options) {
var defaults = {
hintCss: { "color": "#888", "padding": "2px 0px 0px 10px" }
};
var options = $.extend(defaults, options);
return this.each(function () {
var lbl = $(this);
var inputText = $("#" + lbl.attr("for"));
var textboxDivWrapper = $("<div></div>");
textboxDivWrapper.css("position", "relative");
textboxDivWrapper.css("display", inputText.css("display"));
inputText.wrap(textboxDivWrapper);
inputText.after(lbl);
lbl.css("position", "absolute");
lbl.css("left", "0");
lbl.css(options.hintCss);
lbl.css("cursor", "text");
inputText.focus(function () { lbl.css("left", -9999); });
inputText.blur(function () {
if ($(this).val().length == 0) {
lbl.css("left", "0");
}
});
});
};
})(jQuery);
Cliquer ici pour voir un exemple.
Conclusion
Vous pouvez faire votre propre code pour le positionnement et l’apparence du libellé. Ce que je voulais démontrer ici est qu’il est possible d’afficher un indice sur un zone de texte sans modifier la valeur du texte.