Effacement de valeur sur plusieurs entrées?

Question

J'ai un script jQuery ci-dessous qui efface la valeur d'une entrée sur le focus et le remet sur le flou si l'entrée reste vide. Cela fonctionne très bien, mais voici le problème:

Disons que j'ai 3 champs de saisie sur la même page. Je clique sur le premier avec la valeur "Nom", defaultValue variable devient "Nom" et le champ efface. Si je clique sur, la valeur retourne à "Nom". Maintenant, si je clique sur le deuxième champ sans actualiser la page, cela disparaît très bien, mais quand je clique à l'extérieur, au lieu d'obtenir la valeur "Initials", il obtient la valeur du premier champ.

Alors, comment puis-je obtenir la variable defaultValue pour se mettre à jour chaque fois que je clique sur un champ?

var adaugaInput = $('form#adauga input:text'); 

adaugaInput.focus(function() { 
    var defaultValue = $(this).val(); 
    if($(this).attr("value") == defaultValue) $(this).attr("value", ""); 
    adaugaInput.blur(function() { 
     if($(this).attr("value") == "") $(this).attr("value", defaultValue); 
    }); 
}); 

Answer 1

L'explication de pourquoi votre code fonctionne comme il le fait est kind- de compliqué. Pour chaque champ de saisie, vous établissez (et rétablissez, sur chaque événement "focus"!) Les gestionnaires des événements "flou" sur tous les les entrées. C'est déroutant et difficile à penser, alors je vais juste le résumer et dire «ne le faites pas comme ça». Notez que j'utilise ".val()" pour obtenir/définir l'attribut "value" des champs de saisie. En outre, le gestionnaire "flou" est mis en place en dehors de le gestionnaire "focus". Ce code utilise le mécanisme jQuery ".data()" pour conserver la valeur par défaut de l'élément. Non testé mais c'est probablement assez proche.

Avec un mécanisme comme celui-ci, il est parfois agréable de re-style l'entrée afin que (par exemple) la valeur par défaut apparaît avec une couleur de police plus claire. Pour ce faire, vous devez supprimer et ajouter une classe dans le champ de saisie, et affecter le style avec CSS. (. Les entrées devraient commencer avec la classe, ou je suppose que vous pouvez appliquer la classe sur le focus)

Answer 2

i utilise habituellement ce code qui fonctionne :)

http://www.eggchops.com/web-stuff/jquery/jquery-clear-focus-function/

est ici le code:

$(document).ready(function(){ 

var clearMePrevious = ”; 

// clear input on focus 
$(’.clearMeFocus’).focus(function() { 
    if($(this).val()==$(this).attr(’title’)) { 
    clearMePrevious = $(this).val(); 
    $(this).val(”); 
    } 
}); 

// if field is empty afterward, add text again 
$(’.clearMeFocus’).blur(function() { 
    if($(this).val()==”) { 
    $(this).val(clearMePrevious); 
    } 
}); 
}); 

Answer 3

J'irais l'inverse, d'économie defaultValue d'abord, puis mise au point de liaison:

var adaugaInput = $('form#adauga input:text'); 

adaugaInput.each(function(){ 
    var defaultValue = $(this).val(); 
     $(this).focus(function() { 

     if($(this).attr("value") == defaultValue) $(this).attr("value", ""); 
    }); 
    $(this).blur(function() { 
     if($(this).attr("value") == "") $(this).attr("value", defaultValue); 
    }); 
}); 

Des clauses de non-responsabilité standard s'appliquent, le code ci-dessus n'est pas testé. (edit: fixed mulitple blur binds)