11548 sujets

JavaScript, DOM et API Web HTML5

Input text et texte par défaut grisé

Bonjour,
je souhaite réaliser un input text, qui a un texte par défaut qui soit d'un style différent que la saisie (grisé et en italique), et qui disparaisse quand on comment à saisir le champ :

http://img689.imageshack.us/img689/5823/mockupb.png
Le premier champ represente l'état initial et le deuxième champ represente l'état après que l'utilisateur est saisie "Place de la Nation, Paris"

Quelle est la bonne pratique ?

J'ai vu sur un site grand public :
- au chargement de la page, le texte qui doit être grisé est dans l'attribut "title".
- à la fin du chargement de la page, un script Javascript rempli la valeur de l'input par le champs title et assigne une class CSS qui grise le texte.
- à chaque evenement javascript (onFocus, etc.), on met le comportement souhaité (par exemple, onFocus : si la class css est grisé, alors on supprime la classe et la valeur de l'input).
- lors de la validation du formulaire, on vérifie que avec la class CSS que le champ n'est pas grisé, et si c'est le cas on renvoie un message d'erreur.

Ca me semble un peu crade comme solution.

Une autre solution est de superposer un div contenant le texte grisé à l'input. Mais pour faire disparaitre celui-ci de l'input au début de la saisie, n'y a t il pas un risque que ça ne soit pas la bonne div qui intercepte l'evenement javascript ?

Si quelqu'un connait une solution élégante au pbm, je le remercie d'avance de son aide !
Modifié par cescarment (03 Mar 2011 - 13:48)
Salut,
Effectivement tu devras utiliser les évènements focus et blur de ton champ pour ce comportement.

La meilleure façon reste quand même d'utiliser 'placeholder' de HTML5
:)
Un petit tuto s'impose : ici ce code est compatible avec la plupart des navigateurs contrairement à HTML5.
Modifié par Su4p (03 Mar 2011 - 15:30)
Su4p, les liens sur des mots aussi courts et peu descriptifs que «ici», c'est difficile à comprendre et difficile à cliquer. Smiley cligne

L'article est intéressant, et la fonction proposée aussi. Par contre l'alternative JavaScript qu'elle implémente est un peu pauvre par rapport à un support natif de placeholder. Et ça manque un peu de discussion du support natif de placeholder (par exemple, dans les navigateurs qui l'implémentent il n'y a pas pour l'instant de moyen standard de styler le placeholder text).

Pour ma part j'avais commis un plugin jQuery qui gère ça, avec plusieurs options. C'est pas forcément mieux, il y a une TODO relativement longue, et c'est pas assez testé à mon gout pour être tout à fait fiable. Smiley smile
J'avais également eu l'idée de tirer parti de la toile (où l'effacement est plus facile que sur le papier et où certains voudraient nous faire cliquer à coté des fenêtres pour leur donner le focus) de construire des formulaires de ce type répondant néanmoins aux critères d'accessibilité.

J'avais abouti à ce code, qu'il conviendrait peut-être d'adapter pour modifier aussi les styles.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor,   www.pspad.com">
 
<title>Formulaire</title>
<style type="text/css">
body {margin:0px;padding:40px;font:18px Georgia,Garamond,Serif;text-align:center;background:#ffc;color:#600;}
#page {display:block;margin:0px auto;padding:20px;border:0px;width:320px;background:#c96;}
h1 {margin:15px;padding:0px;font-weight:bold;font-size:130%}
input {padding:3px;border:1px solid #000;font:16px Georgia,Garamond,Serif;background:#ffc;}
#page a {text-decoration:none;color:#600}
#page a:hover {text-decoration:underline;font-weight:bold;}
</style>
<script type="text/javascript">
var t_f=null;
function fcs(t){
	if (t.value==t.defaultValue) {t.value='';if (document.selection && document.selection.clear) document.selection.clear()}
}
function blr(t){
	if (t.value=='') {t.value=t.defaultValue;}
}
</script>
</head>
<body>
<div id="page">
<form id="frm" method="POST" action="formulaire.html">
<h1>Pour de<br>nouveaux formulaires</h1>
<p><input id="pre" name="pre" type="text" value="Votre prénom" onfocus="fcs(this)" onblur="blr(this)"></p>
<p><input id="nom" name="nom" type="text" value="Votre nom" onfocus="fcs(this)" onblur="blr(this)"></p>
<p><input id="crl" name="crl" type="text" value="Votre adresse" onfocus="fcs(this)" onblur="blr(this)"></p>
<p><input id="nrg" name="nrg" type="submit" title="Soumettre le formulaire" value="Enregistrer"></p>
<p><input type="reset" title="Soumettre le formulaire" value="Annuler"></p>
</form>
</div>
</body>
</html>
Sujet clos
Aller à