Comment faire pour que mon champ de recherche affiche du texte et le fasse disparaître quand on clique dessus

Question

Je veux que mon champ de recherche dise "Où êtes-vous" le fasse disparaître quand il est cliqué et réapparaisse quand il clique dehors en le laissant vide.

Ceci est le formulaire de recherche:

<div id="search-10" class="widget_search"> 
<form role="search" method="get" id="searchform" action="http://chusmix.com/?s=" onsubmit="window.location = action + s.value + '+: <?php the_search_query() ?>'; return false;"> 
<div> 
<input class="ubicacion" type="text" value="" name="s" id="s2" style="margin-left:0px;"> 
<input type="submit" id="searchsubmit" value="Buscar"> 
</div> 
</form></div> 

J'ai essayé cela, mais pour une raison quelconque, il ne fonctionne pas:

<li id="search-10" class="widget_search"> 
<form role="search" method="get" id="searchform" action="http://chusmix.com/"> 
    <div> 
    <input class="ubicacion" type="text" value="" name="s" id="s" style="margin-left:418px;"> 
    <input type="submit" id="searchsubmit" value="Buscar" onblur=" if(this.value== '') this.value='Where are you';" onfocus=" if(this.value=='Where are you') this.value=''; " value="Where are you" name="keyword" /> 
    </div> 
    </form></li> 

Answer 1

Faux la frontière de l'entrée à l'aide d'une div, et la position de la entrée réelle et une étiquette à l'intérieur - l'un des meilleurs de l'autre.

Dissimule l'étiquette lorsque l'élément obtient le focus, remets-le lorsque le focus est perdu si la valeur est vide. Il existe un example using jQuery.

Answer 2

Voir l'exemple ci-dessous javascript brut -

<input type="text" onblur=" if(this.value== '') this.value='Where are you';" onfocus=" if(this.value=='Where are you') this.value=''; " value="Where are you" name="keyword" /> 

A côté de cela, vous pouvez utiliser jquery, dojo, le plugin Mootools pour gérer cela.

Answer 3

Ceci supprime le texte par défaut lorsqu'un utilisateur clique sur le formulaire de recherche et le rajoute lorsque l'utilisateur clique sur le formulaire de recherche.

<form id="searchform" method="get" action="search.php"> 
<input class="textbox" value="Search" name="s" id="s" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}" type="text"> 
<input type="submit" id="searchsubmit" value="" class="searchsubmit" /> 
</form>