Jquery renvoie la valeur d'entrée par défaut lors de la mise au point

Question

J'ai une entrée de recherche avec une valeur par défaut "Rechercher".

Lorsque je me concentre sur l'entrée de la valeur efface.

$(document).ready(function(){ 
    $('#search').focus(function() {   
     if($(this).val() == "Search for") 
     $(this).val(''); 
    }); 
}); 

Si vous ne tapez rien à la recherche, ce serait une bonne façon de retourner la valeur par défaut « Chercher » valeur en se concentrant sur?

Answer 1

Pourquoi ne pas utiliser un watermark plugin si vous utilisez déjà jQuery? Pourquoi le besoin d'une roue réinventée?

Si vous devez le faire vous-même,

$(document).ready(function(){ 
    $('#search').focus(function() {   
     if($(this).val() == "Search for") 
     $(this).val(''); 
    }).focusout(function() { 
     if($(this).val() === '') 
     $(this).val('Search for'); 
    }); 
}); 

Answer 2

ce que sur l'utilisation focos sur

$("#search").focusout(function() { 
$(this).val('Search for'); 
}); 

ou flou

$('#search').focus(function(){ 
// focus logic goes here 


}).blur(function(){ 

    $(this).val('Search for'); 

}); 

Answer 3

Qu'en est-il de la même chose, mais « inversé »?

$('#search').blur(function() { 
    if($(this).val() == "") { 
     $(this).val('Search for'); 
    } 
}); 

Answer 4

Voici un petit morceau de code pour vous. Il utilisera la méthode de données jQuery pour enregistrer un bool qui indique que l'utilisateur a tapé quelque chose. Si la personne ne tape rien, elle affichera à nouveau le texte.

$("#search").blur(function() { 
    if (!$(this).data('hasTyped')) { 
     $(this).val('Search for'); 
    } 
}).keyup(function() { 
    $(this).data('hasTyped', this.value.length); 
}).focus(function() { 
    if (!$(this).data('hasTyped')) { 
     $(this).val(''); 
    } 
}); 

Exemple: http://jsfiddle.net/jonathon/dbbBh/