texto de ayuda en un textarea

blonder413 · #1 (**permalink**) 19/11/2010, 10:00

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.

BloodShadow · #2 (**permalink**) 19/11/2010, 12:11

Javascript querido amigo... como? así:

Código HTML:

Ver original<textarea cols="50" rows="5" onfocus="this.value='';">deja tu comentario</textarea>

blonder413 · #3 (**permalink**) 19/11/2010, 12:22

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>

emprear · #4 (**permalink**) 19/11/2010, 12:22

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

BloodShadow · #5 (**permalink**) 19/11/2010, 12:29

Cita:

Iniciado por emprear

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<textarea type="text" id="_comment" name="txtsrc">Deja tu comentario</textarea>

Código Javascript:

Ver original<script language="javascript" type="text/javascript">
 
    var comment_i   = document.getElementById('_comment') ;
                                        
    comment_i.style.color = '#666666' ;
                            
    comment_i.onfocus = function(){         
        if(comment_i.value == 'Deja tu comentario'){
            comment_i.style.color = '#666666' ;
            comment_i.value = ''
        }               
    }           
    comment_i.onblur = function(){
        if(comment_i.value == ''){
            comment_i.style.color = '#666666' ;
            comment_i.value = 'Deja tu comentario' ;
        }               
    }
</script>

blonder413 · #6 (**permalink**) 19/11/2010, 12:30

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.

blonder413 · #7 (**permalink**) 19/11/2010, 12:33

gracias BloodShadow, similar a lo que conseguí, aunque interesante.

emprear · #8 (**permalink**) 19/11/2010, 13:06

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

BloodShadow · #9 (**permalink**) 19/11/2010, 13:37

Cita:

Iniciado por emprear

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?

emprear · #10 (**permalink**) 19/11/2010, 14:14

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

BloodShadow · #11 (**permalink**) 19/11/2010, 14:26

emprear copia y pega:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>      
        <title></title>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>
        <textarea id="_comment" name="txtsrc" cols="30" rows="10">Deja tu comentario</textarea>
 
        <script language="javascript" type="text/javascript">
 
            var _comment    = document.getElementById('_comment') ;
 
            _comment.style.color = '#666666' ;
 
            _comment.onfocus = function(){          
                if(_comment.value == 'Deja tu comentario'){
                    _comment.style.color = '#666666' ;
                    _comment.value = ''
                }               
            }           
            _comment.onblur = function(){
                if(_comment.value == ''){
                    _comment.style.color = '#666666' ;
                    _comment.value = 'Deja tu comentario' ;
                }               
            }
        </script>
    </body>
</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

emprear · #12 (**permalink**) 19/11/2010, 14:35

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

BloodShadow · #13 (**permalink**) 19/11/2010, 14:57

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>      
        <title></title>
    </head>
    <body>
        <input type="text" value="hola mundo" /><br />
        <input id="_comment" name="txtsrc" value="texto de prueba">
        <script language="javascript" type="text/javascript">
 
            var _comment    = document.getElementById('_comment') ;
 
            _comment.style.color = '#666666' ;
 
            _comment.onfocus = function(){          
                if(_comment.value == 'texto de prueba'){
                    _comment.style.color = '#666666' ;
                    _comment.value = ''
                }               
            }           
            _comment.onblur = function(){
                if(_comment.value == ''){
                    _comment.style.color = '#666666' ;
                    _comment.value = 'texto de prueba' ;
                }               
            }
            
        </script>
    </body>
</html>

emprear · #14 (**permalink**) 19/11/2010, 15:14

Por fin lo lograste, Felicitaciones

Saludos

BloodShadow · #15 (**permalink**) 19/11/2010, 16:03

Gracias!!! y gracias por el karma