Bonjour à tous,

J'ai un petit problème avec jQuery. Je voudrais pouvoir créer plusieurs évènements en parcourant un tableau.
L'idée est simple, vider un champ quand il a le focus, et le remplis si vide en sortant.
Seulement j'ai beaucoup de champs, je voulais donc automatiser la chose.
Voici mon code:

// IDs et valeurs des champs à vider au focus
var tab_inputs = new Array();
tab_inputs["#login"] = "Identifiant";
tab_inputs["#search"] = "Rechercher";
tab_inputs["#newsletterMail"] = "Votre e-mail";

for(var valeur in tab_inputs){
    $(valeur).focusin(function() {
        if($(valeur).val() == tab_inputs[valeur]) $(valeur).val("");
    });
    $(valeur).focusout(function() {
        if($(valeur).val() == "") $(valeur).val(tab_inputs[valeur]);
    });
}

Ca fonctionne à moitié, à savoir que l'évènement semble avoir été créé sur chaque, mais qu'il ne manipule que le dernier élément créé.
Résultat, si je clique sur n'importe quel champ mentionné dans le tableau, c'est le dernier champ qui est vidé.

C'est surement un problème tout bête de contenu de la variable ... mais je galère

Merci d'avance pour votre aide

Un exemple de code HTML qui va avec stp.

Biensur

<input type="text" id="newsletterMail" name="newsletterMail" value="Votre e-mail" />

Ah et j'ai oublié de préciser que le code en dur fonctionne très bien ...

En dur ?

Oui si je mets directement les valeurs comme ça:

$("#newsletterMail").focusin(function() {
    if($("#newsletterMail").val() == "Votre e-mail") $("#newsletterMail").val("");
});
$("#newsletterMail").focusout(function() {
    if($("#newsletterMail").val() == "") $("#newsletterMail").val("Votre e-mail");
});

Tu as dit qu'il y en avait plusieurs d'input, montre un exemple où c'est le cas pour qu'on voit la structure et ainsi adapter le JS.

Perso j'utilise plutôt ça, je ne sais pas si ça correspondrait à tes attentes (voir un exemple ici) :

input.void, textarea.void
{   font-style: italic
;   color: #888
}

<input type="text" title="Votre adresse mail" />
<input type="text" title="Sujet du message" />
<textarea title="Votre message"></textarea>

$('input[type=text][title],textarea[title]').each(function(i, input){
	if(this.value==''){
		$(this).addClass('void').val(this.title);
	}
}).focus(function(){
	if(this.value==this.title){
		$(this).removeClass('void').val('');
	}
}).blur(function(){
	if(this.value==''){
		$(this).addClass('void').val(this.title);
	}
});

Citation : Desolation

Tu as dit qu'il y en avait plusieurs d'input, montre un exemple où c'est le cas pour qu'on voit la structure et ainsi adapter le JS.

Oui en effet ils ont tous cette structure, des input text avec un id et une valeur par défaut

web-o-blog, merci pour ton code je vais voir ce que ça donne mais je ne suis pas sur que ça corresponde.

C'est incohérent ton truc. Un id doit être unique, là j'ai l'impression que tu as plusieurs input qui ont le même id, c'est pas bon du tout. Dans ce cas-là mets une class.

Oui biensur que mes id sont uniques, d'où le tableau ID/Valeur

var tab_inputs = new Array();
tab_inputs["#login"] = "Identifiant";
tab_inputs["#search"] = "Rechercher";
tab_inputs["#newsletterMail"] = "Votre e-mail";

Avec la technique que je t'ai montrée, tu peux te servir de l'attribut title en HTML, et éviter ainsi d'avoir à surcharger le JavaScript. Même plus besoin d'ID !

input.void, textarea.void
{   font-style: italic
;   color: #888
}

<input type="text" title="Identifiant" />
<input type="text" title="Rechercher" />
<input type="text" title="Votre e-mail" />

$('input[type=text][title],textarea[title]').each(function(i, input){
	if(this.value==''){
		$(this).addClass('void').val(this.title);
	}
}).focus(function(){
	if(this.value==this.title){
		$(this).removeClass('void').val('');
	}
}).blur(function(){
	if(this.value==''){
		$(this).addClass('void').val(this.title);
	}
});

As-tu testé ?

Ahhhhhh merci beaucoup web-o-blog, ça fonctionne parfaitement !
Je l'ai juste un peu modifié pour correspondre à mes besoins, à savoir que je préfère remplir les value directement en HTML au chargement, pour ceux qui n'auraient pas le javascript d'activé.

Du coup je n'utilise que ça

$('input[type=text][title]').each(function(i, input){})
.focus(function(){
    if($(this).val() == $(this).attr("title")){
        $(this).val("");
    }
}).blur(function(){
    if($(this).val() == ""){
        $(this).val($(this).attr("title"));
    }
});

Tu m'ôtes une épine du pied !