Abrir un TextArea al hacer click sobre una caja de texto

elmenda · #1 (**permalink**) 10/10/2010, 03:59

Hola necesito ayuda con un problema.

Necesito que al hacer click sobre una caja de texto pueda abrirse un textarea desapareciendo por completo la caja de texto.

Yo he conseguido con el codigo hacerla invisible o no, pero claro el problema es estan ahi las dos, y claro ocupa su espacio y se nota que hay algo ahi oculto.

Y la idea es que al hacer click sobre la caja de texto, esta desaparezca y solo aparezca en ese mismo espacio el textarea.

Este es el codigo que tengo de momento

Código:

<html><head><script language="JavaScript">
function A(f)
{
  var vis="hidden";
  var visible="visible";
  f.c.style.visibility=vis;
  f.tarea.style.visibility=visible;
}

</script></head><body><form name="a">

<table width="50%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td rowspan="2">Descripcion</td>
    <td><input type="text" name="c" value="" onClick="A(this.form,this.value);" style="visibility:visible"></td>
  </tr>
  <tr>
    <td><textarea name="tarea" cols="20" rows="5" style="visibility:hidden" spry:sort=""></textarea></td>
  </tr>
 </table>
</form>
</body></html>

JavierB · #2 (**permalink**) 10/10/2010, 04:40

Hola elmenda

Cambia visibility (visible/hidden) por display (none/block)

Saludos,

elmenda · #3 (**permalink**) 10/10/2010, 06:05

Muchas gracias era lo que buscaba!

Ahora la duda me surge si por ejemplo como resultado de una consulta en BD me devolviera dos resultados, con dos cajas de texto a convertir en textarea.

Por seguir en el ejemplo y como lo he echo en otros casos añadiria al nombre un numero, en mi ejemplo seria c1, c2 y tarea1 y tarea2 como consecuencia de dos resultados en la BD.

Y a la hora de hacer click en la caja de texto llamar al javascript pasarle ese numero para saber cual tiene que hacerlo, aqui lo cutre seria hacer un if-else en javascript para todos los numeros del 1 al ....... y claro eso es muy cutre.

Como podria hacerlo para que fuera automatico y evitar if-else

Dejo el codigo que tengo (lo tengo para solo dos casos con if-else):

Código:

<html><head><script language="JavaScript">
function A(f,valor,elemento)
{
  var vis="none";
  var visible="block";
  var n = elemento;
  if(n == 1){
  f.c1.style.display=vis;
  f.tarea1.style.display=visible;
  f.tarea1.value = valor;
  }
  else if(n == 2){
  f.c2.style.display=vis;
  f.tarea2.style.display=visible;
  f.tarea2.value = valor;
  }
}

</script>
</head>
<body>

<form name="a">

<table width="50%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td rowspan="2">Descripcion</td>
    <td><input type="text" name="c1" value="Text" onClick="A(this.form,this.value,1);" style="visibility:visible"></td>
  </tr>
  <tr>
    <td><textarea name="tarea1" cols="20" rows="5" style="display:none"></textarea></td>
  </tr>
   <tr>
    <td rowspan="2">Descripcion</td>
    <td><input type="text" name="c2" value="Text" onClick="A(this.form,this.value,2);" style="visibility:visible"></td>
  </tr>
  <tr>
    <td><textarea name="tarea2" cols="20" rows="5" style="display:none"></textarea></td>
  </tr>
 </table>
</form>
</body></html>

Ando repasando los arrays en javaScript porque me creo que es algo de eso para solucionarlo

_cronos2 · #4 (**permalink**) 10/10/2010, 07:49

Prueba así:

Código Javascript:

Ver originalfunction camb(c){
 switch (c.nodeName.toLowerCase()){
  case 'input':
   var t=document.createElement('textarea');
   t.setAttribute('cols','20');
   t.setAttribute('rows','5');
   t.setAttribute('id','tarea'+c.id.substr(1,c.id.length-1));
   t.setAttribute('name','tarea'+c.name.substr(1,c.name.length-1));
   t.setAttribute('onblur','camb(this);');
   t.value = c.value;
   c.form.insertBefore(t,c.nextSibling);
   t.focus();
  break;
  case 'textarea':
   var i=document.createElement('input');
   i.setAttribute('type','text');
   i.setAttribute('id','c'+c.id.substr(5,c.id.length-1));
   i.setAttribute('name','c'+c.name.substr(5,c.name.length-1));
   i.setAttribute('onfocus','camb(this);');
   i.value = c.value;
   c.form.insertBefore(i,c);
  break;
 }
 c.parentNode.removeChild(c);
}

Código HTML:

Ver original<form name="a" action="" method="post">
<input type='text' id="c1" name='c1' onfocus="camb(this);" />
<br />
<input type="text" id="c2" name="c2" onfocus="camb(this);" />
<br />
<input type="submit" value="Enviar" />
</form>

En vez de ocultar y mostrar los campos, los vas borrando y creando. Esto es más útil porque sino aunque esté oculto te llegan los resultados del input y el textarea.
Saludos (:

elmenda · #5 (**permalink**) 10/10/2010, 07:53

Cita:

Iniciado por _cronos2

Prueba así:

Código Javascript:

Ver originalfunction camb(c){
 switch (c.nodeName.toLowerCase()){
  case 'input':
   var t=document.createElement('textarea');
   t.setAttribute('cols','20');
   t.setAttribute('rows','5');
   t.setAttribute('id','tarea'+c.id.substr(1,c.id.length-1));
   t.setAttribute('name','tarea'+c.name.substr(1,c.name.length-1));
   t.setAttribute('onblur','camb(this);');
   t.value = c.value;
   c.form.insertBefore(t,c.nextSibling);
   t.focus();
  break;
  case 'textarea':
   var i=document.createElement('input');
   i.setAttribute('type','text');
   i.setAttribute('id','c'+c.id.substr(5,c.id.length-1));
   i.setAttribute('name','c'+c.name.substr(5,c.name.length-1));
   i.setAttribute('onfocus','camb(this);');
   i.value = c.value;
   c.form.insertBefore(i,c);
  break;
 }
 c.parentNode.removeChild(c);
}

Código HTML:

Ver original<form name="a" action="" method="post">
<input type='text' id="c1" name='c1' onfocus="camb(this);" />
<br />
<input type="text" id="c2" name="c2" onfocus="camb(this);" />
<br />
<input type="submit" value="Enviar" />
</form>

En vez de ocultar y mostrar los campos, los vas borrando y creando. Esto es más útil porque sino aunque esté oculto te llegan los resultados del input y el textarea.
Saludos (:

Muchisimas gracias!!!!! va perfecto