Je suis l'auteur de la fonction JS textInputDynamicValue (sur base jQuery) utilisée ici. Elle ne fonctionne pas ici car elle ne correspond tout simplement pas à ce cas de figure; il faut soit l'adapter, soit l'utiliser autrement, soit écrire sa propre fonction.
Ce qui se passe ici devrait être clair pour toute personne connaissant un minimum JavaScript et qui a passé en revue le code de la fonction pour en comprendre le fonctionnement.
Pour commencer, le troisième cas («Test de changement de texte avec title») ne fonctionne pas car la fonction textInputDynamicValue est appelée avec un paramètre qui lui dit de prendre en compte la valeur de l'attribut "value"... donc forcément ça marche pas avec les title.
(Je me fie à
http://www.jabe.fr/r)
Prenons maintenant le quatrième cas (test avec les value), et voyons ce qu'il se passe.
Pas-à-pas
Lorsqu'on appelle la fonction en lui passant un certain nombre de paramètres, voilà ce qu'on fait pour chaque élément visé:
- on récupère un texte, qui peut être le contenu actuel de l'attribut value de l'élément, le contenu de l'attribut title, ou un texte personnalisé passé en paramètre de la fonction;
- on remplace le value de l'élément avec le texte récupéré, et on applique la classe "hint" (ou autre classe définie en paramètre) à l'élément.
Dans le cas présent, et à ce stade, l'input a comme contenu de l'attribut value: "Dailymotion" (récupéré dans le value... donc ça ne change pas), et comme classe "hint".
Ensuite, notre fonction associe deux gestionnaires d'évènement à notre INPUT. Un pour le gain de focus (tabulation ou clic dans le champ de formulaire), et un pour la perte de focus (tabulation ou clic en dehors).
Le premier gestionnaire d'évènement est associé à une fonction qui vérifie que le contenu du value est "Youtube" (dans ce cas précis), et si oui passe le value à une chaine de caractères vide, et supprime la classe "hint".
Si le value a été changé entre-temps par un autre script, la condition est fausse, et donc rien ne se passe.
Le deuxième gestionnaire d'évènement est associé à une fonction qui vérifie que le contenu du value est "" (vide). Si c'est le cas, elle redonne la classe "hint" et le value "Youtube" à l'élément (là encore, dans ce cas précis).
Ce qui explique que si je charge la page, choisit l'option "Dailymotion", clique dans le champ texte, supprime le texte, et clique en dehors du champ texte... le value redevient "Youtube", et pas "Dailymotion".
Que faire alors?
Une solution possible serait de rappeler la fonction textInputDynamicValue à chaque changement manuel (au clic sur un bouton radio).
Globalement, il faudrait reprendre le JavaScript de manière un peu plus propre. La page devrait fonctionner sans JavaScript, ce qui se gère très bien de la manière suivante (en ne prenant en compte que le quatrième cas):
1. Un formulaire (élément FORM) qui pointe vers un script de traitement unique. Le changement de l'action à effectuer ne doit pas être fait en JavaScript, mais être géré côté serveur.
2. Un champ de saisie (INPUT de type "text") sans valeur prédéfinie (pas de "value"), sans "title" correspondant à l'une ou l'autre option, et avec comme icone informative une image neutre (et pas une icone Youtube par défaut...).
3. Des boutons radio dont le premier est sélectionné par défaut (selected="selected"), et dépourvus d'attributs onclick (on pourra gérer les évènements dans le script externe, surtout si on utilise jQuery...). Le LABEL peut entourer le INPUT, mais ne pas oublier de rendre les LABELs explicites en utilisant les attributs "id" et "for" qui vont bien!
4. Sans JavaScript, on peut taper des mots-clé, choisir un moteur de recherche, envoyer le formulaire au script unique (sur le même serveur)... et ce script s'occupera de recevoir les données du formulaire, de vérifier à quel moteur de recherche il doit transmettre la requête, et de faire une requête en bonne et due forme. Je ne sais pas si une redirection suffirait ou s'il faut recréer la requête dans le script (en PHP ou ce qu'on veut), ça serait à travailler.
Voilà pour la base. Le JavaScript ne doit venir qu'en supplément, pour des améliorations ergonomiques, en veillant au passage à ne pas bousiller l'accessibilité.
Côté JavaScript, il faut donc:
5. Au chargement de la page, appeler textInputDynamicValue sur l'INPUT (en le ciblant précisément!), et utiliser en paramètre le texte à afficher, qui doit correspondre au bouton radio sélectionné par défaut.
6. Toujours au chargement, modifier la source et éventuellement le alt de l'image, toujours en fonction du bouton radio sélectionné par défaut.
7. Au clic sur les INPUT radio (observé via un gestionnaire d'évènement défini avec jQuery, pas un onclick
), a) modifier l'image et b) appeler la fonction textInputDynamicValue en visant le bon INPUT (comme précédemment) et en lui passant le bon texte.
Voilà, tout ça devrait marcher. Au pire, si on veut faire marcher l'existant il doit être possible d'appliquer uniquement l'étape 7.
Ah oui, juste une chose: il faudrait vérifier qu'appeler deux fois la fonction textInputDynamicValue pour un même élément remplace bien les gestionnaires d'évènements, et ne les cumule pas. Tiens, je vais peut-être faire ça.
.
.