Texte d'exemple dans un textarea ?

Bonjour,

Je travaille à la modification d'un formulaire web de saisie de métadonnées cartographique (comme ca vous savez tout).

Et je voudrais ajouter dans certains champs de saisie 'libre' des remarques concernant les informations attendues.
Je n'ai pas d'url d'exemple sous la main, mais je pense que vous voyez tous de quoi je veux parler. On retrouve souvent ces textes en grisé dans un champ de saisie, qui disparaissent dès qu'on passe en focus sur.

Merci de m'orienter pour réaliser cette modif.

PS: (N'étant pas sur de la technologie à employer, css, js etc. je me suis dit qu'il fallait mieux poster dans html, déplacez mon post au besoin.)
Modifié par sov (22 Jun 2010 - 17:25)

Curieux comme on trouve plus de résultats dès qu'on se met à chercher en anglais =))

Un début de réponse ici:

http://css-tricks.com/creating-a-nice-textarea/

Notamment le coeur de ce que je souhaite faire:

<textarea name="styled-textarea" id="styled" onfocus="this.value='';">Enter your comment here...</textarea>

Reste à trouver comment griser le contenu pour le texte par défaut et le passer en noir pour le texte écrit après le onfocus.

Cette technique se fait en Javascript.

Mais d'un point de vue ergonomique, c'est pas l'idéal, surtout si tes formulaires sont longs, ou qu'ils contiennent des informations qu'on a pas l'habitude de remplir (autre que email, pseudo, password quoi)...

Situation :
J'ai rempli un formulaire long et douloureux... J'ai pas envie de passer 20 minutes de plus en cas d'erreur donc je veux vérifier...

Oh la moitié des infos ne sont plus visibles puisque j'ai rempli les champs... Comment je sais si j'ai bon ou pas du coup ?

C'est un exemple bateau, mais suivant le formulaire et surtout la cible, ça peut devenir gênant pour certains...

Personnellement je préconiserai plutôt un texte à côté du champs qui s'affiche au focus avec JS c'est plus pratique, on peut remplir et consulter l'aide en même temps, et revérifier avant d'envoyer !

Dans tous les cas, c'est dans la section Javascript que tu trouveras l'aide appropriée

Attention avec l'exemple que tu as mis :
Quand on clic dans le champs, son contenu se vide...

Si je remplis un champs, que je passe au suivant et que je reviens au champs précédent il va se vider complètement !

Bonjour,

Dans l'idée, tu as déjà la base (mettre des event JS sur onFocus). Pour éviter le problème soulevé par HammHetfield il faut, avant de vider le champs, vérifier que sa valeur est bien celle par défaut (avec un simple if).

Pour changer la couleur de la police, c'est également possible en JS, juste après avoir vidé le champs. La syntaxe, devrait normalement être this.style.color='NouvelleCouleur'.

@HammHetfield (wow deux membres de mettalica d'un coup ! chapeau =)). Nous avions pensé au pb que tu soulèves. Mais on a pris le parti de continuer dans cette voie.
Connaissant nos utilisateurs on sait que face à un champ "libre", ils vont se sentir en confiance (et donc ne pas utiliser d'aide 'cachée') et le remplir selon leur humeur.
Donc nous allons utiliser le texte grisé dans le textarea en plus d'une aide accessible via un (?)

@Laurie-Anne: C'est noté, merci =)

Bonjour,

Déplacement dans le salon JavaScript.

Laurie-Anne a écrit :
Pour changer la couleur de la police, c'est également possible en JS, juste après avoir vidé le champs. La syntaxe, devrait normalement être this.style.color='NouvelleCouleur'.

Le mieux serait de rajouter ou enlever une classe sur l'élément, et de gérer le style exact (couleur, autres propriétés...) en CSS. Pour rappel, on peut lire ou modifier la valeur de l'attribut "class" d'un élément en JavaScript avec element.className.

Pour info, j'avais bricolé quelque chose en jQuery qui gère ce type de comportement:
http://covertprestige.info/javascript/inputdynvalue/
Et j'ai une version de test qui gère plus de cas de figures et deux problèmes potentiels (comportement problématique au rafraichissement ou retour sur la page, envoi par le navigateur des textes de suggestion), mais c'est encore en chantier:
http://covertprestige.info/javascript/inputdynvalue/test.html

Bien sûr, utiliser jQuery uniquement pour ce genre de fonctionnalité serait excessif.
Modifié par Florent V. (23 Jun 2010 - 15:22)

Yeah,

Je teste tout cela dès que possible !

Je n'ai pas encore terminé, donc pas de "résolu" pour le moment, mais je profite de quelques tests pour suggérer une auter méthode full css que j'ai trouvé ici:

http://webtint.net/tutorials/the-mysterious-pseudo-class-in-css/

Je vous invite à vous intéresser au formulaire de recherche sur le site.
En utilisant une image et les pseudo classes css ( :hover et :focus) on arrive également au résultat que je cherche à atteindre.
Perso j'aime assez la méthode mais je ne suis pas sur qu'elle fonctionne sur tous les navigateurs...

Une solution en CSS va vitre être limitée. En particulier, je me demande comment on pourrait gérer ce cas de figure en CSS:
1. Le champ a un texte de suggestion.
2. Au focus (par clic sur le champ ou tabulation) on masque ce texte de suggestion.
3. À la perte du focus, si le champ est vide, on affiche le texte de suggestion.
4. À l'inverse, s'il n'est pas vide, on ne doit surtout pas voir le texte de suggestion.

Une solution CSS avec :focus peut gérer les deux premiers points (avec des risques pour l'accessibilité du formulaire, à vue de nez); mais pas les deux suivants.

sov a écrit :
Perso j'aime assez la méthode mais je ne suis pas sur qu'elle fonctionne sur tous les navigateurs...

Ne fonctionnera pas sur IE7, ok pour les autres navigateurs (dont IE8 et le futur IE9).