[Résolu] Contenu d'un champs disparaissant au clic.

[Nicosmos]

Hello
J'ai plusieurs de champs de formulaire ... Mmh, oui, en fait, j'ai un formulaire. Avec des champs dedans. Jusque là tout va bien.

Ces champs ont un contenu dès le chargement de la page, l'attribut value étant rempli. Et lorsque le visiteur clique sur un champs. Et bien le contenu est encore là. Oui, en fait, c'est normal.

L'idée, c'est que ce contenu disparaisse lors du clic, afin que le visiteur ai tous le champs libre pour écrire tout ce qu'il veut dedans. Finalement, c'est assez courant, mais je n'ai pas trouvé comment faire. Tellement courant, que je n'ai pas réussi à retomber par hasard sur un site où il y avait ça

Il y a une spec HTML directement pour faire ça ? Ou un simple petit bout de JS ?

Merci d'avance,
Nico.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.1) Gecko/2008072820 Firefox/3.0.1

[calimo]

Tu peux certainement faire un this.value="" sur un onclick.

Mais n'oublie pas ceux qui ont le javascript désactivé, et fais en sorte que ce champ soit rempli par javascript, c'est beaucoup plus sympa

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.1) Gecko/2008072820 Firefox/3.0.1

[Thomas]

Je débute en javascript mais il me semble qu'il faille aussi rajouter return false; après le this.value=""; pour qu'il ne l'efface qu'une fois (ce serait dommage qu'après avoir entré son texte l'utilisateur reclique sur le champ et qu'il disparaisse !).

Message envoyé avec : Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1a2pre) Gecko/2008080702 Minefield/3.1a2pre

[calimo]

(ce serait dommage qu'après avoir entré son texte l'utilisateur reclique sur le champ et qu'il disparaisse !).

Ah, ça me rappelle des choses ça... sur ubuntu-fr (sauf qu'ils utilisent onfocus et pas onclic, qui est évidemment mieux, puisque c'est indépendant du dispositif, comment ai-je pu dire une ânerie pareille , oublie onclic, utilise toujours onfocus ! )

[Nicosmos]

Salut Merci, ça marche ... presque
La suppression fonctionne, mais le coup du "l'utilisateur reclique sur le champ et qu'il disparaisse" est bel est bien là, même avec return false.
Deuxième chose, pour faire la même chose sur un textarea, ou le contenu de base n'est pas dans value mais entre des les balises, comment on fait ?

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.1) Gecko/2008072820 Firefox/3.0.1

[calimo]

Regarde sur framasoft (sauf qu'eux, ils font l'erreur de le mettre en dûr plutôt qu'en javascript au chargement, du coup sans javascript, ça ne disparaît pas... mais je suis sûr que tu peux faire ça !)

Pour les zones, un inner.HTML devrait faire l'affaire

[Nicosmos]

Regarde sur framasoft [...]
Pour les zones, un inner.HTML devrait faire l'affaire

Génial, les deux fonctionnent Dernière question, quel est le contraire de onFocus ? (pour dire que si le champs n'a pas le focus, et qu'il est vide, alors il revienne à sa valeur normale, dans le cas où le visiteur viderait le champs et ne se souviendrait plus à quoi il correspond ensuite).

sauf qu'eux, ils font l'erreur de le mettre en dûr plutôt qu'en javascript au chargement, du coup sans javascript, ça ne disparaît pas

Je suis pas sûr que ce soit une erreur, même au contraire. Sans JS, le nom du champs n'apparaîtrait même pas, et le visiteur ne saurait pas quoi mettre dedans. Ne vaut-il mieux pas qu'il aie à effacer le contenu avant d'écrire plutôt qu'il ne comprenne même pas le sens du formulaire ?


Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.1) Gecko/2008072820 Firefox/3.0.1

[Benoit]

Salut Merci, ça marche ... presque
La suppression fonctionne, mais le coup du "l'utilisateur reclique sur le champ et qu'il disparaisse" est bel est bien là, même avec return false.

Il suffit sans doute de comparer avec la valeur que tu as introduite toi-même en JavaScript, et ne vider le champ que si elle est identique.

[Nicosmos]

Il suffit sans doute de comparer avec la valeur que tu as introduite toi-même en JavaScript, et ne vider le champ que si elle est identique.

Oui, c'est ce qu'a fait Framasoft.

Code : Tout sélectionner

<input ... onFocus="if (this.value=='Test') this.value=''" value="Test">

et pour la textarea :

Code : Tout sélectionner

<textarea ... onFocus="if (this.innerHTML=='Test') this.innerHTML=''">Test</textarea>

Ça marche très bien.

Dernière question, quel est le contraire de onFocus ?

Ça, j'ai trouvé moi même, c'est onBlur

Sujet [Résolu]
Reste la question plus au dessus : est-il mieux de générer le texte de base avec du Javascript ou de le mettre directement dans le value HTML ?

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.1) Gecko/2008072820 Firefox/3.0.1

[calimo]

Pour moi c'est mieux de le générer en javascript. Soit on n'a rien, soit on a tout, mais c'est toujours assez embêtant de se retrouver avec seulement la moitié. C'est comme quand le menu déroulant est caché avec un display:none directement en CSS et qu'il faut javascript pour le rouvrir : sans javascript il ne s'ouvre jamais


Sur un onload, un document.getElementById(...).value = "blabla" devrait faire l'affaire, je pense...

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.1) Gecko/2008072820 Firefox/3.0.1

[Nicosmos]

Mmh, dans le cas d'un formulaire de contact par exemple. Avec du tout-JS, le visiteur qui arrive sans Javascript ne peut même pas contacter l'auteur car il se retrouve devant toute une série de champs vides sans aucune signification.

Avec un value HTML par contre, il voit la même chose que quelqu'un qui a JS activé. Il peut donc sans problème remplacer le contenu des champs par ses valeurs. Même chose avec une plage braille (ou tout autres trucs dans ce genre). La valeur des champs est visible et le formulaire peut être rempli.



Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.1) Gecko/2008072820 Firefox/3.0.1

[calimo]

Alors c'est qu'il y a une erreur de conception dans ton site ! Tu dois utiliser des <label> pour baliser tes champs de formulaires.
Voir http://openweb.eu.org/articles/formulaire_accessible
C'est important en termes d'accessibilité; je doute que du contenu à l'intérieur des champs soit compréhensible

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.1) Gecko/2008072820 Firefox/3.0.1

[Nicosmos]

Tiens je n'avais jamais lu cette page (alors que j'avais lu pleins d'autres trucs sur OpenWeb) Merci Donc, j'utilise label, et je génère mon value par JS.

Mais il me faudrait aussi masquer le label, pour éviter de répéter deux fois la même chose. Il y a t'il une méthode plus accessible qu'un display:none; pour faire ça (et puis un masquage uniquement pour JS présent/activé) ?

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.1) Gecko/2008072820 Firefox/3.0.1

[Benoit]

En fait ce que tu devrais faire (selon moi), c'est mettre ton texte dans le label, ensuite par JavaScript le recopier dans le champ texte et cacher le label.

J'ai une idée d'un truc plus subtil, mais sans doute très compliqué à faire fonctionner : placer le label derrière le champ de saisie et rendre le fond du champ transparent, et cacher le label dès qu'il y a du contenu dans le champ.