Textbox con Descripción

robertocorona · #1 (**permalink**) 26/05/2009, 09:59

Algo asi: Ejemplo Yahoo

Mientras esta el Texbox vacio muestra un texto con color gris claro que indica el tipo de dato que debe introducir. ya que escribes se borra y el texto introducido es de otro color..

Otro ejemplo es la caja que aparece en esta página arriba de Google que dice Busqueda personalizada... algo asi es lo que busco.

Saludos

David · #2 (**permalink**) 26/05/2009, 10:02

Puedes usar los eventos onfocus (recibe el enfoque) y onblur (pierde el enfoque) para realizarlo.

En el onfocus quitas el texto y en onblur lo vuelves a poner en caso de que el campo siga vacío.

robertocorona · #3 (**permalink**) 26/05/2009, 10:59

Código de ejemplo, muy sencillo pero es lo que pude lograr hasta ahora.
Gracias, Saludos

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sin título 1</title>

<script type="text/javascript">

function ltrim(s) {return s.replace(/^\s+/, "");}
function rtrim(s) {return s.replace(/\s+$/, "");}
function Trim(sCadena) {return rtrim(ltrim(sCadena));}

function Salida(txt){
if (Trim(txt.value) == '') {
txt.value = txt.title;
txt.style.color= '#b2b2b2';
}
}

function Entrada(txt){
if (txt.value == txt.title) {
txt.value = '';
txt.style.color= '#000000';
}
}

</script>

</head>

<body>
<input name="Text1" type="text" onblur="Salida(this)" onfocus="Entrada(this)" title="Escribir" />
</body>

</html>

cristhiandiaz · #4 (**permalink**) 13/09/2010, 16:07

"robertocorona", Muchisimas gracias a Usted. Muy buen aporte.