Un petit truc tout bête. Il y a de cela encore quelques temps, les vieilles versions de SPIP avait un comportement Javascript sur le champ du formulaire de recherche, qui permettait de vider le champ lorsque l’utilisateur plaçait le focus dessus. Technique plus ou moins discutable selon les cas et, qui a finalement disparu des présentes versions. Voyons ensemble comment la rétablir de manière intelligente.
Une fois encore c’est aux forces combinées de 2 spipeurs, Kent1 et Beurt, que cette petite bidouille a vu le jour. Merci à eux !
Problématique
Le champ de recherche ! Petit bout de formulaire visible sur quasiement tous les sites web aujourd’hui et, qui permettent d’effectuer une recherche en interne sur le site en question. Or, de plus en plus de webmaster, lorsqu’ils installent ce genre de formulaire, choisissent de ne pas afficher le label du-dit champ, qui apparait souvent dans un conteneur de petite taille pour ne pas surcharger la mise en page, mais utilisent alors la propriété value du champ de formulaire pour y afficher une expression du type "Votre recherche"
Problème : lorsque l’utilisateur clique sur le champ, il est pratique que ce champ se vide, plutôt que d’imposer à l’utilisateur de devoir le vider manuellement. SPIP le faisait naturellement jusqu’à ce que cette technique soit abandonnée du fait du...
...Problème numéro 2 : Dans SPIP, lorsque l’utilisateur effectue une recherche, il est donc logiquement redirigée vers la page des résultats, laquelle reprend dans le formulaire de recherche la requète qu’il a composé. Et s’il voulait affiner celle-ci, un seul clic sur le champ de recherche effacait donc ce qu’il avait tapé dedans.
Solution
Un petit bloc de script en JQuery qui :
- controlle le contenu du champ de recherche
- le vide sur une mise en focus si et seulement si celui ci contient la Value standard "Votre recherche"
- Ne fait rien s’il contient autre chose
à mettre dans votre fichier inc-head.html ou son équivalent si vous avez un squelette perso. Disons pour simplifier que d’une manière générale ce script devra se trouver quelque part entre les balises <head> et </head>
All Simply ! 
Testé et approuvé sur
- Mozilla Firefox (Linux et PC)
- Safari (PC)
- Internet Explorer 6 (PC)
Tout retour additionnel est le bienvenue
RSS 2.0
Répondre à cet article
Suivre les commentaires :
| 