Auto vaciar textarea al hacer clic dentro...

markshock · #1 (**permalink**) 23/06/2009, 01:04

Hola amigos...

os pongo en situación, tengo el siguiente código:

Código HTML:

//autovaciar campos de formulario
function input_focus(campo,texto){
	if(campo.value==texto){campo.value='';}
}
function input_blur(campo,texto){
	if(campo.value==''){campo.value=texto;}
}


<input type="text" name="titulo" id="titulo" value="Escribe aquí el título del anuncio" onfocus="javascript:input_focus(this,'Escribe aquí el título del anuncio');" onblur="javascript:input_blur(this,'Escribe aquí el título del anuncio');" maxlength="120"/>

Y funciona genial...

pero si lo aplico aun textarea.... no me va....

Código HTML:

<textarea name="observaciones" id="observaciones" cols="" rows="">Detalla el momento, la situación y localización exacta donde lo perdiste o lo encontraste.

IMPORTANTE: Por razones de seguridad evita facilitar datos personales</textarea>

Creo que el problema es por el espaciado que hay en el texto.... que no se como hacerlo para que en la comparación de la función replicarlo perfectamente para que coincida con el value...

if(campo.value==texto)

alguna idea? u otra opción?

Mil gracias!

KiraSakuya · #2 (**permalink**) 23/06/2009, 01:21

Perdona que sea lo primero que he visto, pero prefiero asegurar que no es eso, falta el evento onblur y el onfocus en el textarea. Si no es eso ya miro mas detalladamente :)

markshock · #3 (**permalink**) 23/06/2009, 01:26

Cita:

Iniciado por KiraSakuya

Perdona que sea lo primero que he visto, pero prefiero asegurar que no es eso, falta el evento onblur y el onfocus en el textarea. Si no es eso ya miro mas detalladamente :)

No los he puesto, para ver como los pondríais... yo cuando coloco el onblur y onfocus, en el texto a comparar le meto unos \n\r para el salto de línea...

no se como colocar ese texto para que lo compare bien... jaar...!

crujikoki · #4 (**permalink**) 23/06/2009, 03:50

Hola,

Mira a ver si esto es lo que quieres:

Código PHP:

  <html>  
<head>  
<script type="text/javascript"> 
 
function textArea_blur(id) 
{ 
    var texto = new String(); 
    texto = "Escribe algo aquí..."; 
    var area = document.getElementById(id); 
    if(area.value == "") 
    { 
        area.value="Escribe algo aquí..."; 
    } 
} 
 
function textArea_focus(id) 
{ 
    var texto = new String(); 
    texto = "Escribe algo aquí..."; 
    var area = document.getElementById(id); 
    if(area.value == texto) 
    { 
        area.value=""; 
    } 
} 
 
</script> 
</head>  
<body>  
<textarea rows="2" cols="20" id="area" onBlur="textArea_blur(this.id)" onFocus="textArea_focus(this.id)"> 
Escribe algo aquí...</textarea> 
</body>  
</html>

Si no es lo que quieres vuelve a postear y nos lo miramos.

Saludos!

markshock · #5 (**permalink**) 23/06/2009, 04:40

muchas gracias, a la hora de comer le pego una ojeada.

markshock · #6 (**permalink**) 23/06/2009, 07:01

Cita:

Iniciado por crujikoki

Hola,

Mira a ver si esto es lo que quieres:

Código PHP:

  <html>  
<head>  
<script type="text/javascript"> 
 
function textArea_blur(id) 
{ 
    var texto = new String(); 
    texto = "Escribe algo aquí..."; 
    var area = document.getElementById(id); 
    if(area.value == "") 
    { 
        area.value="Escribe algo aquí..."; 
    } 
} 
 
function textArea_focus(id) 
{ 
    var texto = new String(); 
    texto = "Escribe algo aquí..."; 
    var area = document.getElementById(id); 
    if(area.value == texto) 
    { 
        area.value=""; 
    } 
} 
 
</script> 
</head>  
<body>  
<textarea rows="2" cols="20" id="area" onBlur="textArea_blur(this.id)" onFocus="textArea_focus(this.id)"> 
Escribe algo aquí...</textarea> 
</body>  
</html>

Si no es lo que quieres vuelve a postear y nos lo miramos.

Saludos!

Vale, esto funciona bien. pero...

con este texto en el textarea... como lo colocas en la función para que lo evalue correctamente?

Cita:

Detalla el momento, la situación y localización exacta donde lo perdiste o lo encontraste.

IMPORTANTE: Por razones de seguridad evita facilitar datos personales.

crujikoki · #7 (**permalink**) 25/06/2009, 01:12

Hola,

No tengo ni idea de a que te refieres...

¿¿¿ Cuando dices "con este texto en el textarea..." te refieres a lo de "Escribe algo aquí..." ???

¿A que te refieres por "colocar en la función" y que "lo evalue correctamente"?

A mi modo de entender ya estoy haciendo lo que dices, aun que si vuelves a psotear querrá decir que no... La verdadque no entiendoa que te refieres...

Por si a caso he cambiado un poco el código para hacerlo un pelin más limpio, pero vaya, que la filosofia es la misma.

Código PHP:

  <html> 
<head> 
<script type="text/javascript"> 
 
var textoInicial = new String(); 
textoInicial = "Escribe algo aquí..."; 
 
function textArea_blur(id) 
{ 
    var area = document.getElementById(id); 
    if(area.value == "") 
    { 
        area.value="Escribe algo aquí..."; 
    } 
} 
 
function textArea_focus(id) 
{ 
    var area = document.getElementById(id); 
    if(area.value == textoInicial) 
    { 
        area.value=""; 
    } 
} 
 
</script> 
</head> 
<body> 
<textarea rows="2" cols="20" id="area" onBlur="textArea_blur(this.id)" onFocus="textArea_focus(this.id)"> 
Escribe algo aquí...</textarea> 
</body> 
</html>

Por favor, si aun no te hemos resuelto la duda o hay algo que no entiendes, nos lo puedes explicar un poco más detallado? Yo al menos no lo entiendo...

Saludos.

markshock · #8 (**permalink**) 25/06/2009, 01:20

Cita:

Iniciado por crujikoki

Hola,

No tengo ni idea de a que te refieres...

¿¿¿ Cuando dices "con este texto en el textarea..." te refieres a lo de "Escribe algo aquí..." ???

¿A que te refieres por "colocar en la función" y que "lo evalue correctamente"?

A mi modo de entender ya estoy haciendo lo que dices, aun que si vuelves a psotear querrá decir que no... La verdadque no entiendoa que te refieres...

Por si a caso he cambiado un poco el código para hacerlo un pelin más limpio, pero vaya, que la filosofia es la misma.

Código PHP:

  <html> 
<head> 
<script type="text/javascript"> 
 
var textoInicial = new String(); 
textoInicial = "Escribe algo aquí..."; 
 
function textArea_blur(id) 
{ 
    var area = document.getElementById(id); 
    if(area.value == "") 
    { 
        area.value="Escribe algo aquí..."; 
    } 
} 
 
function textArea_focus(id) 
{ 
    var area = document.getElementById(id); 
    if(area.value == textoInicial) 
    { 
        area.value=""; 
    } 
} 
 
</script> 
</head> 
<body> 
<textarea rows="2" cols="20" id="area" onBlur="textArea_blur(this.id)" onFocus="textArea_focus(this.id)"> 
Escribe algo aquí...</textarea> 
</body> 
</html>

Por favor, si aun no te hemos resuelto la duda o hay algo que no entiendes, nos lo puedes explicar un poco más detallado? Yo al menos no lo entiendo...

Saludos.

En lugar de que el textarea escriba el texto "Escribe algo aquí" ... que sea con este texto:

"Detalla el momento, la situación y localización exacta donde lo perdiste o lo encontraste.

IMPORTANTE: Por razones de seguridad evita facilitar datos personales."

fíjate que el texto de encima de estas lineas tiene 2 párrafos... ese es mi problema... :P

GagleKas · #9 (**permalink**) 25/06/2009, 02:31

no hace falta pasarle el id a la funcion, basta con que le pases this:

Código javascript:

Ver originalfunction textArea_focus (textarea){
    if (textarea.value == textoInicial){
        textarea.value = "";
    }
}
 
onFocus="textArea_focus (this);"

crujikoki · #10 (**permalink**) 26/06/2009, 01:09

Hola,

Mira a ver si esto es lo que quieres:

Código PHP:

  <html>  
<head>  
<script type="text/javascript">  
 
function textArea_blur(TxtArea,TxtInicial)  
{   
    if(TxtArea.value == "")  
    {  
        TxtArea.value = TxtInicial;  
    } 
}  
 
function textArea_focus(TxtArea,TxtInicial)  
{  
    if(TxtArea.value == TxtInicial)  
    {  
        TxtArea.value="";  
    }  
}  
 
</script>  
</head>  
<body>  
<textarea rows="20" cols="100" id="area" onBlur="textArea_blur(this,this.defaultValue)" onFocus="textArea_focus(this,this.defaultValue)"> 
Detalla el momento, la situación y localización exacta donde lo perdiste o lo encontraste. 
 
IMPORTANTE: Por razones de seguridad evita facilitar datos personales.</textarea>  
</body>  
</html>

markshock · #11 (**permalink**) 01/07/2009, 09:23

Cita:

Iniciado por crujikoki

Hola,

Mira a ver si esto es lo que quieres:

Código PHP:

  <html>  
<head>  
<script type="text/javascript">  
 
function textArea_blur(TxtArea,TxtInicial)  
{   
    if(TxtArea.value == "")  
    {  
        TxtArea.value = TxtInicial;  
    } 
}  
 
function textArea_focus(TxtArea,TxtInicial)  
{  
    if(TxtArea.value == TxtInicial)  
    {  
        TxtArea.value="";  
    }  
}  
 
</script>  
</head>  
<body>  
<textarea rows="20" cols="100" id="area" onBlur="textArea_blur(this,this.defaultValue)" onFocus="textArea_focus(this,this.defaultValue)"> 
Detalla el momento, la situación y localización exacta donde lo perdiste o lo encontraste. 
 
IMPORTANTE: Por razones de seguridad evita facilitar datos personales.</textarea>  
</body>  
</html>

Hola Socio!!

Hoy he probado lo que me pasaste y oye, fabuloso!!! la verdad es que genial! muchas, muchas gracias!!!