Foros del Web » Creando para Internet » HTML »

texto de ayuda en un textarea

Estas en el tema de texto de ayuda en un textarea en el foro de HTML en Foros del Web. hola, estoy realizando un formulario y necesito ingresar un textarea para los comentarios, lo que necesito es que aparezca un mensaje del tipo "deja tu ...
  #1 (permalink)  
Antiguo 19/11/2010, 10:00
Avatar de blonder413  
Fecha de Ingreso: octubre-2010
Mensajes: 58
Antigüedad: 7 años, 2 meses
Puntos: 0
Pregunta texto de ayuda en un textarea

hola, estoy realizando un formulario y necesito ingresar un textarea para los comentarios, lo que necesito es que aparezca un mensaje del tipo "deja tu comentario", pero al dar clic sobre el textarea para escribir este desaparezca automáticamente, ¿cómo puedo lograr esto? gracias.
  #2 (permalink)  
Antiguo 19/11/2010, 12:11
Avatar de BloodShadow  
Fecha de Ingreso: marzo-2010
Ubicación: El Salvador
Mensajes: 393
Antigüedad: 7 años, 8 meses
Puntos: 52
Respuesta: texto de ayuda en un textarea

Javascript querido amigo... como? así:

Código HTML:
Ver original
  1. <textarea cols="50" rows="5" onfocus="this.value='';">deja tu comentario</textarea>
  #3 (permalink)  
Antiguo 19/11/2010, 12:22
Avatar de blonder413  
Fecha de Ingreso: octubre-2010
Mensajes: 58
Antigüedad: 7 años, 2 meses
Puntos: 0
De acuerdo Respuesta: texto de ayuda en un textarea

gracias, conseguí algo que me funcionó perfecto
Código:
<html>
<head>
<title>Documento</title>
<script language="javascript" type="text/javascript">
function Borrar(valor)
{
if(document.getElementById("comentario").value==valor)
{
document.getElementById("comentario").value="";
}
}

function Escribir(valor)
{
if(document.getElementById("comentario").value=="")
{
document.getElementById("comentario").value=valor;
}
}
</script>
</head>
 
<body>
<form name="contacto">
<textarea id="comentario" onfocus="Borrar('Escribe tu comentario...')" onblur="Escribir('Escribe tu comentario...')">
Escribe tu comentario...
</textarea>
</form>
</body>
</html>
  #4 (permalink)  
Antiguo 19/11/2010, 12:22
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: texto de ayuda en un textarea

blonder413:

No es nada recomendable hacer eso en un textarea, si la persona mientras completa el form, se desplaza entre los campos y vuelve a tu textarea para alguna corrección, todo el texto que escribió, se va a perder, en un input de texto, que exige menos contenido, vaya y pase, pero en un textarea me parece poco conveniente, limitate a ponerle un label o algun texto identificatorio de la funcion del campo.



Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #5 (permalink)  
Antiguo 19/11/2010, 12:29
Avatar de BloodShadow  
Fecha de Ingreso: marzo-2010
Ubicación: El Salvador
Mensajes: 393
Antigüedad: 7 años, 8 meses
Puntos: 52
Respuesta: texto de ayuda en un textarea

Cita:
Iniciado por emprear Ver Mensaje
blonder413:

No es nada recomendable hacer eso en un textarea, si la persona mientras completa el form, se desplaza entre los campos y vuelve a tu textarea para alguna corrección, todo el texto que escribió, se va a perder, en un input de texto, que exige menos contenido, vaya y pase, pero en un textarea me parece poco conveniente, limitate a ponerle un label o algun texto identificatorio de la funcion del campo.



Saludos
+1

solo le daba una respuesta, aca esta como puede funcionar evitando lo que dice emprear

Código HTML:
Ver original
  1. <textarea type="text" id="_comment" name="txtsrc">Deja tu comentario</textarea>

Código Javascript:
Ver original
  1. <script language="javascript" type="text/javascript">
  2.  
  3.     var comment_i   = document.getElementById('_comment') ;
  4.                                        
  5.     comment_i.style.color = '#666666' ;
  6.                            
  7.     comment_i.onfocus = function(){        
  8.         if(comment_i.value == 'Deja tu comentario'){
  9.             comment_i.style.color = '#666666' ;
  10.             comment_i.value = ''
  11.         }              
  12.     }          
  13.     comment_i.onblur = function(){
  14.         if(comment_i.value == ''){
  15.             comment_i.style.color = '#666666' ;
  16.             comment_i.value = 'Deja tu comentario' ;
  17.         }              
  18.     }
  19. </script>
  #6 (permalink)  
Antiguo 19/11/2010, 12:30
Avatar de blonder413  
Fecha de Ingreso: octubre-2010
Mensajes: 58
Antigüedad: 7 años, 2 meses
Puntos: 0
Información Respuesta: texto de ayuda en un textarea

aceptable la sugerencia, pero encontré un código para text que me funcionó y no borra el contenido que se ingrese, solo muestra la sugerencia cuando el textarea está en blanco.
  #7 (permalink)  
Antiguo 19/11/2010, 12:33
Avatar de blonder413  
Fecha de Ingreso: octubre-2010
Mensajes: 58
Antigüedad: 7 años, 2 meses
Puntos: 0
Respuesta: texto de ayuda en un textarea

gracias BloodShadow, similar a lo que conseguí, aunque interesante.
  #8 (permalink)  
Antiguo 19/11/2010, 13:06
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: texto de ayuda en un textarea

Cita:
Iniciado por BloodShadow
solo le daba una respuesta, aca esta como puede funcionar evitando lo que dice emprear
En todo caso, eso tampoco funciona


Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #9 (permalink)  
Antiguo 19/11/2010, 13:37
Avatar de BloodShadow  
Fecha de Ingreso: marzo-2010
Ubicación: El Salvador
Mensajes: 393
Antigüedad: 7 años, 8 meses
Puntos: 52
Respuesta: texto de ayuda en un textarea

Cita:
Iniciado por emprear Ver Mensaje
En todo caso, eso tampoco funciona


Saludos
Dime por que no funciona? si haces clic, desaparece el texto "Deja tu comentario" si sales y has escrito algo te deja tu texto tal cual como es... si no has escrito nada, te deja de nuevo el texto "Deja tu comentario"

Ahora dime xq no funciona?
  #10 (permalink)  
Antiguo 19/11/2010, 14:14
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: texto de ayuda en un textarea

a las pruebas me remito

http://foros.emprear.com/html/borrar..._textarea.html
Para empezar, comment_i te devuelve null para objeto

ahi está tu script aplicada sin modificación alguna...
Vos la probaste?
Si es así pasa el código completo, incluido html


Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #11 (permalink)  
Antiguo 19/11/2010, 14:26
Avatar de BloodShadow  
Fecha de Ingreso: marzo-2010
Ubicación: El Salvador
Mensajes: 393
Antigüedad: 7 años, 8 meses
Puntos: 52
Respuesta: texto de ayuda en un textarea

emprear copia y pega:

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  2.     "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.     <head>     
  5.         <title></title>
  6.         <link rel="stylesheet" type="text/css" href="styles.css" />
  7.     </head>
  8.     <body>
  9.         <textarea id="_comment" name="txtsrc" cols="30" rows="10">Deja tu comentario</textarea>
  10.  
  11.         <script language="javascript" type="text/javascript">
  12.  
  13.             var _comment    = document.getElementById('_comment') ;
  14.  
  15.             _comment.style.color = '#666666' ;
  16.  
  17.             _comment.onfocus = function(){         
  18.                 if(_comment.value == 'Deja tu comentario'){
  19.                     _comment.style.color = '#666666' ;
  20.                     _comment.value = ''
  21.                 }              
  22.             }          
  23.             _comment.onblur = function(){
  24.                 if(_comment.value == ''){
  25.                     _comment.style.color = '#666666' ;
  26.                     _comment.value = 'Deja tu comentario' ;
  27.                 }              
  28.             }
  29.         </script>
  30.     </body>
  31. </html>

Sinceramente no se por que si lo pones en el head no funciona... lo hice hace mucho tiempo y siempre lo he usado debajo del input a vaciar... nunca avía pensado hacer una función general para solo mandarle los id de los respectivos campos a vaciar... La are y cuando la tengo lista, la posteo de nuevo :D
  #12 (permalink)  
Antiguo 19/11/2010, 14:35
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: texto de ayuda en un textarea

Probablemente porque no reconoce el objeto hasta leer todo el documento, ahora mejoró un poco, pero el texto de ayuda debería aparecer por defecto. y deberias agregar algun campo extra para ver como se comporta al utilizar el teclado.


Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #13 (permalink)  
Antiguo 19/11/2010, 14:57
Avatar de BloodShadow  
Fecha de Ingreso: marzo-2010
Ubicación: El Salvador
Mensajes: 393
Antigüedad: 7 años, 8 meses
Puntos: 52
Respuesta: texto de ayuda en un textarea

El texto de ayuda aparece por defecto... que no es dinámico si es cierto, con 2 input funciona perfectamente... ya que llama justamente al id que va a modificar :D aca esta con 2 input...

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  2.     "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.     <head>     
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <input type="text" value="hola mundo" /><br />
  9.         <input id="_comment" name="txtsrc" value="texto de prueba">
  10.         <script language="javascript" type="text/javascript">
  11.  
  12.             var _comment    = document.getElementById('_comment') ;
  13.  
  14.             _comment.style.color = '#666666' ;
  15.  
  16.             _comment.onfocus = function(){         
  17.                 if(_comment.value == 'texto de prueba'){
  18.                     _comment.style.color = '#666666' ;
  19.                     _comment.value = ''
  20.                 }              
  21.             }          
  22.             _comment.onblur = function(){
  23.                 if(_comment.value == ''){
  24.                     _comment.style.color = '#666666' ;
  25.                     _comment.value = 'texto de prueba' ;
  26.                 }              
  27.             }
  28.            
  29.         </script>
  30.     </body>
  31. </html>
  #14 (permalink)  
Antiguo 19/11/2010, 15:14
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: texto de ayuda en un textarea

Por fin lo lograste, Felicitaciones


Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #15 (permalink)  
Antiguo 19/11/2010, 16:03
Avatar de BloodShadow  
Fecha de Ingreso: marzo-2010
Ubicación: El Salvador
Mensajes: 393
Antigüedad: 7 años, 8 meses
Puntos: 52
Respuesta: texto de ayuda en un textarea

Gracias!!! y gracias por el karma

Etiquetas: textarea
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:00.