Fondo de un text input

morfasto · #1 (**permalink**) 28/11/2011, 18:00

Hola, que tal?

Estoy buscando la manera de hacer para que cuando un text input no tenga nada escrito aparezca una texto tenue que diga algo, como por ejemplo: Responder aqui!

Creo que vi una vez que se podia hacer con una imagen de fondo, pero como se la quito cuando alguien escriba? Existe alguna otra manera de hacerlo?

Muchas gracias!

emprear · #2 (**permalink**) 28/11/2011, 18:49

para eso html5 incorpora un atributo llamado placeholder, pero lamentablemente todavía no es compatible con todos los navegadores (IE para ser más precisos), hasta tanto lo sea, yo prefiero manejarme con esto

Código HTML:

Ver original<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
.texto{
color: #666;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function color(campo,texto){
var elcampo = document.getElementById(campo).value;
if(elcampo == texto)    {
document.getElementById(campo).style.color="#666";
}
}
//]]>
</script>
</head>
<body>
<div>
 
<form action="#">
<input type="text" class="texto" name="nombre_ingreso" value="usuario" id="nombre_ingreso"
onclick="this.value='';this.style.color='#000';" onfocus="this.select()" onblur="this.value=!this.value?'usuario':this.value; color(this.id,'usuario');" />
</form>
 
</div>
</body>
</html>

también podes usar una versión simplificada, dónde no atenuas el color, tenes que eliminar
color(this.id,'usuario');
el css
y la función. es decir solo esto

Código HTML:

Ver original<form action="#">
<input type="text" name="nombre_ingreso" value="usuario" 
onclick="this.value='';this.style.color='#000';" onfocus="this.select()" onblur="this.value=!this.value?'usuario':this.value;" />
</form>

Por supuesto que es más complicado, pero soy de eso que piensan, si no corre en IE, no me sirve.
saludos

morfasto · #3 (**permalink**) 30/11/2011, 10:59

Existe alguna otra manera de hacerlo?

emprear · #4 (**permalink**) 30/11/2011, 11:16

si, hay otras. por ejemplo
http://webdesignerwall.com/tutorials...comment-page-2

Pero todas involucran javascript, jquery...
para hacerlas compatibles con todos los navegadores

Saludos