home Foro de soporte Ayuda para webmasters Java y Javascript
 
¿Cómo hago que desaparesca un texto en un campo al poner el cursor y que...
#1 ·

He visto que en FaceBook lo hace, el la página de Inicio para logearse aparece "Email" y "Password", cuando situo el cursor para escribir se desaparece cuando lo quito vuelve a aprecer.

Sé que es sencillo hacer con JavaScript, ¿Alguién podría explicarme cómo?.


Usuario habitual
Usuario habitual
Haz clic para ver el perfil del usuario
Mensajes: 16
Desde: 31/Jul/2009
·
#2 · ·

Home es un poco chapucero pero bueno. Usas dos eventos onclick y onblur. El primero para borrar el valor del campo del texto y el segundo evento para restaurar el valor del campo de texto cuando pierda el foco.

function borracampo(){
 if( document.frm.txtvalue.value == "Introduce tu nombre")
   document.campos.borrado.value = ""
}

function restauracampo(){
 if( document.frm.txtvalue.value=="")
   document.campos.borrado.value="Introduce tu nombre"
 }

<form name="frm">
<input type="text" name="txtvalue" onclick="borracampo()" onblur="restauracampo()" value="Pulsa para ver el ejemplo">
<form>

En la primera funcion comparas si el valor del campo de texto del formulario es igual a la cadena de texto. Si coincide se borrara cuando hagas click sobre el campo. La segunda funcion hace la inversa, restaura el valor del campo de texto.

Saludos.


Come y duerme en el foro
Come y duerme en el foro
Haz clic para ver el perfil del usuario
Mensajes: 484
Desde: 13/Ene/2009
· ·
#3 ·

Lo hice exactamente cómo lo describes lo he puesto de este modo, pero no me hace el efecto, lo he provado con 4 tipos de Navegadores Web (FireFox, Internet Explorer, Google Chrome y Opera):

ejemplo.html

Código:
<!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=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
</head>

<body>
<script type="text/javascript">
function borracampo(){
 if( document.frm.txtvalue.value == "Introduce tu nombre")
   document.campos.borrado.value = ""
}

function restauracampo(){
 if( document.frm.txtvalue.value=="")
   document.campos.borrado.value="Introduce tu nombre"
 }
</script>
<form name="frm">
<input type="text" name="txtvalue" onclick="borracampo()" onblur="restauracampo()" value="Pulsa para ver el ejemplo">
<form>
</body>
</html>

Usuario habitual
Usuario habitual
Haz clic para ver el perfil del usuario
Mensajes: 16
Desde: 31/Jul/2009
·
#4 · ·

Perdon perdon perdon.

Que se me olvido cambiar los "names" de los elementos del formulario.

Aqui esta el codigo corregido y funcionando en Chrome, Firefox , IE y Safari

Código:
<html>
<head>
<title>Ejemplo js</title>
<script>
function borracampo(){
if(document.frm.txtfield.value == "Introduce tu nombre")
   document.frm.txtfield.value = ""} 

function restauracampo(){
  if(document.frm.txtfield.value=="")
   document.frm.txtfield.value="Introduce tu nombre"
   }
</script>
</head>
<body>
<form name="frm">
<input type="text" name="txtfield" onclick="borracampo()" onblur="restauracampo()" value="Introduce tu nombre" />
<form>
</body>
</html>

Sorry por el error. Saludos.


Come y duerme en el foro
Come y duerme en el foro
Haz clic para ver el perfil del usuario
Mensajes: 484
Desde: 13/Ene/2009
· ·
#5 ·

Gracias, por el aporte!! funcionó.


Usuario habitual
Usuario habitual
Haz clic para ver el perfil del usuario
Mensajes: 16
Desde: 31/Jul/2009
·
ATENCIÓN: Este tema no tiene actividad desde hace más de 6 MESES,
te recomendamos abrir un nuevo tema en lugar de responder al actual
Foro de soporte · Ayuda para webmasters · Java y Javascript
Opciones:
Subscríbete a este tema
Date de baja de este tema
Ir al subforo:  
TU NO PUEDES Escribir nuevos temas en este foro
TU NO PUEDES Responder a los temas en este foro
TU NO PUEDES Editar tus propios mensajes en este foro
TU NO PUEDES Borrar tus propios mensajes en este foro
Ahora son las 06:04 UTC+02:00 DST
Temas similares
No se han encontrado temas similares