Effacer la valeur par défaut du formulaire de recherche lors du 1er clic

Ceci est une ARCHIVE, peut-être périmée. Vérifiez bien les compatibilités !

Ce filtre va vous permettre de modifier les formulaires spip pour que lorsque l’utilisateur clique dans un champ de texte, la valeur qui y était par défaut soit effacée.

En fait c’est plus subtil que ça encore : si l’utilisateur n’a rien mis dans le champ en question, et qu’il sort du champ, le texte par défaut sera remis. Sinon si l’utilisateur a tapé du texte lui-même le texte par défaut ne reviendra évidemment pas !

Ceci est particulièrement utile avec le formulaire #FORMULAIRE_RECHERCHE par exemple qui contient par défaut le texte « Rechercher ».
Avec ce filtre vous allez pouvoir faire en sorte que lorsqu’un visiteur clique dans le champ, le texte « Rechercher » soit effacé pour lui permettre de taper le mot clé qu’il souhaite rechercher sans avoir à effacer le texte « Rechercher » comme c’est le cas actuellement.

Ensuite, lorsque l’utilisateur sort du champ (le champ « perd le focus », comme on dit), alors si l’utilisateur a tapé qqch dans le champ le contenu du champ n’est pas modifié (heureusement sinon la saisie de l’utilisateur n’aurait servie à rien !!) et s’il n’a rien tapé (juste cliqué dans le champ puis en est ressorti) le texte par défaut (ici « Rechercher ») se remet.

NB : Attention : pour appliquer un filtre à #FORMULAIRE_RECHERCHE, il faut mettre 2 barres verticales : [(#FORMULAIRE_RECHERCHE||vider_sur_clic)]

Voici le code à inclure dans mes_fonctions.php3 :

function vider_sur_clic($texte)
{
$js = " onblur=\"if (!has_changed) value = oldval;\""
	." onchange=\"has_changed=true;\""
	." onfocus=\"if (typeof(has_changed) == 'undefined') has_changed = false; "
	."if (!has_changed) {oldval=value; value = '';}\"";
$res = preg_replace("|<(input(.*) type='text'(.*))>|iU","<\$1 $js>",$texte);
return $res;
}

[MaJ] Je viens de modifier un poil le code pour rajouter un élément qui manquait pour que ce soit compatible avec IE. En effet si has_changed n’est pas défini, IE ne considère pas que (!has_changed) est vrai. Donc il faut lui dire « s’il n’est pas défini, met has_changed à faux » pour ensuite pouvoir utiliser la notion de vrai/faux.

Discussion

4 discussions

  • 4

    Plus simple, pour la version SPIP 1.8.

    Dans le dossier formulaires, il y a le « squelette » formulaire_recherche.html (ce n’est pas un squelette, au sens propre, mais plutôt un morceau de html), qui comporte la ligne :
    ..
    value=« [(#ENV*recherche_securisee)] » />

    En remplaçant value=.. par :
    value=« [(#ENV*recherche_securisee)] » onClick=« this.form.recherche.value=’’ » />

    .. on efface le mot Recherche au premier click. Je n’ai pas testé sur tous les environnements mais c’est permis dans une balise input dans le cas général, et ça semble fonctionner. Bien sûr, on trifouille (mais si peu..) le SPIP. Si javascript est désactivé, on revient au fonctionnement normal.

    Voilà.
    A essayer..

    • Si vous avez des problèmes avec la source ci-dessus essayez plutôt celle-là
      -  
      &lt ;form action=&quot ;[(#ENVlien)]&quot ; method=&quot ;get&quot ; class=&quot ;formrecherche&quot ;&gt ;
      &lt ;div&gt ;
      &lt ;input type=&quot ;text&quot ;
      id=&quot ;formulaire_recherche&quot ;
      class=&quot ;formrecherche&quot ;
      name=&quot ;recherche&quot ;
      value=&quot ;rechercher un article&quot ; onFocus=&quot ;this.form.recherche.value=’ ’&quot ;&gt ;
      &lt ;/div&gt ;
      &lt ;/form&gt ;-

      pour le voir marcher aller sur le http://ngozo.africa-web.org

    • il faut mettre onfocus à la place de onClick

      Sur le http://ngozo.africa-web.org ça marche (spip 1.8.2)

    • Ou de façon plus lisible ;)

      ‹form action="[(#ENVlien)]" method="get" class="formrecherche"›
      ‹div›
      ‹input type="text"
      id="formulaire_recherche"
      class="formrecherche"
      name="recherche"
      value="rechercher un article"
      onFocus="this.form.recherche.value=’’"›
      ‹/div›
      ‹/form›

    • oups, il faut rajouter les accolades autour de : lien... et ça marche !

    Répondre à ce message

  • Bonjour,
    J’ai collé le code dans mes_fonctions.php3 et remplacé toutes les balises [(#FORMULAIRE_RECHERCHE)] par [(#FORMULAIRE_RECHERCHE||vider_sur_clic)] et ça ne marche pas.

    Lorsque je clique dans la valeur par défaut du formulaire de recherche, rien ne se passe. Si je saisie une valeur à rechercher, j’ai une erreur « la page est introuvable ».

    Au 1er clic dans la valeur par défaut du formulaire de recherche, si j’affiche le code source, la fonction vider_sur_clic est définie ainsi :

    J’utilise SPIP 1.2.

    Je ne sais pas quoi faire !!

    Merci de vos réponses.

    Répondre à ce message

  • J’ai fait comme indiqué, en modifiant le filtre dans le fichier recherche-dist.html (je travaille sur un squelette BeeSpip version 1.6.2). Ça ne marche pas. Et si j’ajoute le code à inclure dans mes_fonctions.php3, j’ai un message d’erreur qui dit
    Parse error : parse error in /Library/WebServer/Documents/spip/mes_fonctions.php3 on line 12
    la ligne 12 correspondant dans mon fichier à
    « onchange= »has_changed=true ;\« »
    Y a-t-il un endroit bien précis où placer le code à inclure dans mes_fonctions.php3 ?
    Ai-je bien fait de remplacer
    #FORMULAIRE_RECHERCHE
    par
    [(#FORMULAIRE_RECHERCHE||vider_sur_clic)]
    dans recherche-dist.html ?

    Répondre à ce message

  • 1

    Bonjour…
    En fait j’ai copié/collé tout le code au bon endroit, j’ai bien créé un fichier mes_fonctions.php et ajouté l’indication de filtre sur la balise spip du formulaire (avec les deux barres bien entendu), mais a la place de mon formulaire sur mon browser ca me met un "Erreur : filtre « recherche » non défini".

    J’ai remplacé le nom vider_sur_clic par "recherche" (dans ma balise spip et dans le fichier mes_fonctions.php), j’ai vérifié l’ortographe et tout, j’ai même réessayé en remettant le nom d’origine du filtre, j’ai vidé le cache 10 fois au moins, rien à faire !!

    Merci de m’aider !! ^_^

    • Par ailleurs, j’aimerai bien changer la couleur du contour qui s’active lorsque l’on clique dans la zone de saisie du formulaire… pourrait-on m’indiquer ou changer ca ?

      Merci !!

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom