effacer la valeur par défaut

Question

J'ai trouvé beaucoup d'exemples mais j'essaie de trouver le moyen le plus simple d'effacer la valeur par défaut d'une entrée en cliquant dessus.

Ceci est pour une boîte de recherche. J'ai "Rechercher un message" et je veux effacer cela en cliquant dessus.

J'ai essayé d'utiliser jquery mais pour une raison quelconque cela ne fonctionne pas.

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

<input type="text" name="s" id="search" value="Search for post">  

Quelqu'un peut-il penser à un code plus simple?

Answer 1

Pour une entrée, vous souhaitez utiliser .focus()

démonstration en direct: http://jsfiddle.net/rchern/aWdgZ/

Answer 2

Il serait intéressant d'essayer avec l'attribut html5 placeholder. Cela fonctionnerait sur toutes les versions actuelles de Safari, Chrome et Firefox.

<input type="text" name="s" id="search" placeholder="Search for post"/> 

Vous devez ensuite ajouter un code de secours pour les navigateurs qui ne prennent pas en charge cette fonctionnalité.

$(function() { 
    $(':input[placeholder]').each(function() { 
     var me = $(this); 
     me.val(me.attr('placeholder')) 
      .focus(function() { 
       var that = $(this); 
       if (that.val() == that.attr('placeholder')) { 
        that.val(''); 
       } 
      }).blur(function() { 
       var that = $(this); 
       if (that.val().trim().length == 0) { 
        that.val(that.attr('placeholder')); 
       } 
      }); 
    }); 
}); 

J'ai jeté ensemble un jsfiddle pour tester ceci. Il semble fonctionner très bien pour ceux qui le supportent, et d'autres aussi bien que cela peut être pour les navigateurs comme IE 6.

http://jsfiddle.net/V2R9J/ (Note: J'ai changé le trim pour une comparaison de chaîne vide juste pour le faire fonctionner. pourrait/devrait utiliser ici votre propre fonction de trim.)

Clause de non-responsabilité: Cela ne fonctionnera pas pour les champs qui sont insérés via ajax. Vous pouvez essayer quelque chose avec live, ou vous pouvez invoquer manuellement une méthode. En outre, cela fonctionne avec password champs, car il va juste les faire montrer le * ou un autre champ à puces, mais c'était déjà un problème.

Ceci est assez expérimental, mais il semble que ce soit une solution vraiment cool qui permette aux utilisateurs des nouveaux navigateurs d'avoir accès aux fonctionnalités de html5, aussi simple soit-elle.

Answer 3

$('#search').focus(function() {   
$(this).val(''); 
$(this).unbind('focus'); 
});