dimanche 12 septembre 2010
C'est arrivé souvent dans nos projets qu'on ait à mettre des champs de formulaire sans étiquette (balise label), par exemple pour la recherche, où on inscrivait comme valeur par défaut le mot clé "Recherche" pour indiquer la nature de la fonctionnalité. Au moment du focus, la valeur temporaire disparaissait pour laisser place à un champ libre pour saisir le mot clé. Si le curseur quittait la zone (blur) en laissant le champ vide, la valeur par défaut s'affichait de nouveau pour restaurer l'état initial.
Pour y arriver, un bout de code JavaScript était nécessaire, comme celui-ci avec jQuery :
var placeholder = 'Recherche';En HTML 5, ce snippet de code ne sera plus nécessaire puisqu'on a introduit un nouvel attribut "placeholder" qui sert exactement à imiter ce comportement de façon native.
$('#search').focus(
function(e){
if($(this).val() == placeholder){
$(this).val('')
}
}
).blur(
function(e){
if($(this).val() == ''){
$(this).val(placeholder)
}
}
);
<div>
<input type="text" name="q" placeholder="Recherche">
<button type="submit">OK</button>
</div>
<div>
<input type="text" name="username" placeholder="Courriel">
<input type="password" name="password" placeholder="Mot de passe">
<button type="submit">Se connecter</button>
</div>
Ce qui est bien, c'est que le placeholder fonctionne aussi sur un champ de mot de passe, contrairement à par le passé où toute valeur dans un champ input="password" s'affichait avec des caractères masqués. Ce n'est plus le cas en HTML 5 puisqu'on peut basculer automatiquement entre les deux états (attribut valeur et placeholder).
Au moment d'écrire ces lignes, l'attribut placeholder fonctionnait seulement avec les versions les plus récentes de Safari et Chrome. Je vous suggère de poursuivre votre lecture sur un billet écrit la semaine dernière sur les nouveaux contrôles de formulaire en HTML 5 et leur compatibilité avec les fureteurs.
un probleme majeur pourtant,
ton script est incompatible avec la détection des champs requis,
avec le placeholder natif HTML5, la valeur du champs reste nul, on peux donc informer l'utilisateur sur l'absence de saisie.
Le hack le plus propre, serait d'intercalé un div par dessus, le onclick masquerais son contenu.
Ainsi le champs serait toujours "vide"
C'est vrai que le JavaScript ne permet pas de détecter si le champ est requis si on le vérifie normalement côté client ou serveur (on doit le considérer vide si la chaîne de caractères est égale à la valeur du "placeholder").
Mais la question n'est pas là. Le but était de démontrer comment le placeholder HTML5 réglait le problème qui était contourné de différentes façons depuis des années.
Cela dit, je ne trouve pas ton hack très propre. Aussi bien vider la valeur du champ en JavaScript si sa valeur est inchangée au moment de soumettre le formulaire.
c'est vraiment "sale" :(
où est passé l'attribut 'title' c'est son rôle pourtant ...
Perso, un grand merci pour ta fonction, cela m'a été bien utile.
J'ai juste transformé ta variable placeholder en tableau, parce que j'utilise plusieurs champs, et une ou deux autres petites modifs.
( Perso, j'utilises ce code pour un formulaire mail, donc je ne me fatigues même pas à vider les valeur par défaut. Le html5 seul ne suffisait pas à apporter toutes les solutions à mon problème. )
Merci à toi en tout cas
var placeholder = new Array();
jQuery('#contact form input,#contact form textarea:not(.read-only)').each(function(e){
placeholder[e] = jQuery(this).val();
if(placeholder[e]!=""){
jQuery(this).focus(
function(f){
if(jQuery(this).val()==placeholder[e]){
jQuery(this).val('');
}
}
).blur(
function(f){
if(jQuery(this).val()==''){
jQuery(this).val(placeholder[e]);
}
});
}
});
J'ai vu qu'on pouvait aussi faire un placeholder sur un TextArea, par contre il y a moyen de faire un retour à la ligne dans le contenu du placeholder ?
@raphaël : selon les spécifications html5, un retour de ligne dans un placeholder n'est pas autorisé.