Vider/remplir un champ sauf quand l'utilisateur clique sur un bouton

Bonjour à tous,

J'ai un champ de recherche qui contient "Saisissez les mots clés".

Si l'utilisateur clique dans le champ (onclick) le texte disparaît, si il clique en dehors (onblur) le texte réapparaît.

Mon souci est que lorsque l'utilisateur clique sur le bouton "rechercher", le texte réapparait furtivement avant d'envoyer le formulaire (normal l'évènement onblur est déclenché).

Comment éviter ce comportement ?

Voici mon code :

var txt = $('#site .search form input[type=text]').val(); // Retrieve original field value
	
// On click, remove the text
$('#site .search form input[type=text]').click(function() {
    $(this).val('');
});
	
// On blur, refill the original text
$('#site .search form input[type=text]').blur(function() {
    if ($(this).val() == '') {
        $(this).val(txt);
    }
});

Merci d'avance.
Modifié par kyf59 (05 Dec 2012 - 16:43)

Salut c'est logique en effet.

Je vais te proposer de prendre le problème sous un autre angle. A quoi bon faire une recherche si le champs est vide ?

Ne peux-tu pas bloquer le submit tant que ton input est vide ou égal à sa valeur d'origine ?

Ju

Merci pour ta réponse.

- "A quoi bon faire une recherche si le champs est vide ?" :
Le champ n'est pas vide : l'utilisateur clique (donc ça vide le champ), puis il saisi ses mots clés (évidemment), puis clique sur "rechercher", ce qui a pour effet de remplacer ses mots clés par "Veuillez saisir vos mots clés".

- "Ne peux-tu pas bloquer le submit"
Ca ne réglera pas mon problème

Franck.

Je pensais que ton soucis arrivait lors d'une recherche vide.

Tu dois avoir un truc qui cloche dans ton js. Au blur de ton input, tu ne touches à sa value que si elle est vide. Logiquement si l'internaute entre un texte ton js ne fera rien.

As-tu essayé de voir ce que te retourne $(this).val() au blur ?

EDIT : Test
EDIT 2 : je serais toi, je viderai le champ au focus si et seulement si sa valeur est celle d'origine. Je m'explique, si on recherche 'tuc' et qu'on a oublié le 'r' on peut le rajouter sans retaper toutes l'expression.
Modifié par JulienFouquet (05 Dec 2012 - 17:24)

Moi je rajouterais juste ça :

var txt = $('#site .search form input[type=text]').val(); // Retrieve original field value
	
// On click, remove the text
$('#site .search form input[type=text]').click(function() {
    if ( txt == $(this).val() ) // uniquement si egal a la valeur original (normalement "Saisissez les mots clés")
        $(this).val('');
});
	
// On blur, refill the original text
$('#site .search form input[type=text]').blur(function() {
    if ( $(this).val() == '' ) {
        $(this).val(txt);
    }
});

Après c'est a toi de tester (en PHP) la valeur de ton champ. Et si il est égal à "Saisissez les mots clés" il ne faut pas le prendre en compte.

Car de toute façon, si l'utilisateur clic directement sur rechercher, et bien le champ avait déjà "Saisissez les mots clés" c'est bien ça ?

Ou sinon, il faut rajouter un event lors du submit du formulaire qui efface le contenu du champ si celui-ci égal "Saisissez les mots clés"

Et comme le dis @JulienFouquet le mieux encore serait de faire ça au focus et non au click (focus étant en qlq sorte l'opposé du blur)