Search Box - Texto

[djwall]

Muy buenas noches


gente, tengo este form:

Código HTML:

<td valign="middle">
	<table  cellpadding="0" cellspacing="0">
	<form action="<?=url('search/listing')?>" method="post" name="search_form">
	<tr>
	<td valign="top">
	<input type="text" id="search_box" name="title" value="" name="search_box"  />
	</td>
	<td>
	<input type="submit" value="find" id="search_button" style="display:none" />
	</td>
	</tr>
	</form>
	</table>
</td> 

Quisiera que en la caja de busqueda aparezca un texto clarito que cuando el usuario haga click para escribir... el texto desaparezca.


Por ejemplo que en el campo de busqueda diga: "buscar musica"
Y cuando el usuario haga click en el searchbox el texto desaparezca.

Bueno espero haber sido claro, si alguien me da una manito x favor... se lo agradecere. muchas gracias!


Nota: He nota q mucha gente busca un sistema de usuarios... registro, login y demas... tengo uno, si alguien lo necesita... siempre es bueno aportar, se los paso x privado, saludos.

[carmagedon]

Hola,

Bueno lo podés hacer con JavaScript sin problemas.
En el evento del mouseDown podés verificar que si el mouse al hacer click tiene un ID = search_box aplicar el document.getElementById("search_box").value = ""; y en caso contrario que se vuelva a cargar el valor que tenía por default, que lo tendrías que poner a mano.
Cualquier cosa investiga acerca del evento onmousedown, id's, y document.getElementById si es que nunca los utilizaste.

Un saludo.

[American2010]

Prueba con esto

Código HTML:

<input type="text" class="field" name="name" id="s"  value="Tu Texto" onfocus="if (this.value == 'Tu Texto') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Tu Texto';}" /> 

Lo de que sea más clarito no recuerdo, creo que desde el css debes darle el estilo, pero no recuerdo como hacer que sea independiente del color que tenga el texto que uno ingresa.

(Lo que hace este código que es tan largo, es que si alguien dió click y no escribió nada, al sacar el cursor de ahí, volverá a aparecer tu texto.

[danneg]

el nuev twitter usa una tecnica que jamas se me ubiese ocurrido, con css

muestra de fondo una imagen con el texto, al hacer focus cambia la imagen por una sin texto y vuala!!

muy interesante, claro que hay que detallarlo para su mejor funcionamiento!!

[djwall]

Gracias muchachos por las respuestas, me sirvieron mucho, les mando un abrazo!

q anden bien.