texarea expandible

kaninox · #1 (**permalink**) 27/05/2008, 19:42

he buscado pero los codigos que he visto no me funcionan :/ la idea es hacer un textarea expandible al igual como lo hace el de aqui... con unos botoncitos imagenes arriba abajo poder manejar el largo del textarea y que al igual que aqui si apreto mucho el hacerlo pequeño llegue hasta donde esta por defecto.....

espero se entienda mi idea....

Panino5001 · #2 (**permalink**) 27/05/2008, 19:56

Fijate si te sirve:

Código PHP:

  <!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>test</title>

<script>

function $(id){

    return document.getElementById(id);    

}

function addEvent(obj, evType, fn, useCapture){

 

 if (obj.addEventListener){

    obj.addEventListener(evType, fn, useCapture);

    

  } else if (obj.attachEvent){

    obj.attachEvent("on"+evType, fn);

   

  } else {

   obj['on'+evType]=fn;

  }

}

var reng=5;

function agregar(){

    $('quita').disabled=false;

    reng=reng+5;

    $('pp').rows=reng;

}

function quitar(){

    reng=reng-5;

        if(reng<6){reng=5;

        }

    $('pp').rows=reng;

}

window.onload=function(){

    addEvent($('quita'), 'click', quitar, false);

    addEvent($('agrega'), 'click', agregar, false);

}

</script>

</head>

 
<body>

<form id="form1" name="form1" method="post" action="">

  <textarea id="pp" name="textarea" cols="60" rows="5"></textarea>

  <input id="agrega" type="button" name="Submit" value="+" />

  <input id="quita" type="button" name="Submit2" value="-" />

</form>

</body>

</html>

kaninox · #3 (**permalink**) 27/05/2008, 22:01

yes master funciona del 1 se agradece....

mi pregunta es como puedo cambiar los botones + y - por imagenes .....

:)

Panino5001 · #4 (**permalink**) 27/05/2008, 22:07

Los reemplazás por imágenes manteniendo los atributos id que tienen esos botones ;)

kaninox · #5 (**permalink**) 27/05/2008, 22:17

haci lo hice y nada tambien probe con href id y onclick etc... :/

Código:


<a  id="agrega" onClick="agrega" href="#deta"> <img src="mas.jpg"  id="agrega" name="Submit" title="+" width="80" height="80"/></a>&nbsp;
 <a  id="quita" onBlur="quita" href="#deta"> <img src="menos.jpg" title="-"  id="quita" name="Submit2"  width="80" height="80"/></a>


cada uno solo y todo junto asi como se vee

Panino5001 · #6 (**permalink**) 27/05/2008, 22:53

Así funciona:

Código PHP:

  <!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>test</title>

<script>

function $(id){

    return document.getElementById(id);    

}

function addEvent(obj, evType, fn, useCapture){

 

 if (obj.addEventListener){

    obj.addEventListener(evType, fn, useCapture);

    

  } else if (obj.attachEvent){

    obj.attachEvent("on"+evType, fn);

   

  } else {

   obj['on'+evType]=fn;

  }

}

var reng=5;

function agregar(){

    $('quita').disabled=false;

    reng=reng+5;

    $('pp').rows=reng;

}

function quitar(){

    reng=reng-5;

        if(reng<6){reng=5;

        }

    $('pp').rows=reng;

}

window.onload=function(){

    addEvent($('quita'), 'click', quitar, false);

    addEvent($('agrega'), 'click', agregar, false);

}

</script>

</head>

 
<body><img id="agrega" src="http://www.forosdelweb.com/customavatars/avatar115517_1.gif" /><img  id="quita" src="http://www.forosdelweb.com/customavatars/avatar65984_1.gif" />

<form id="form1" name="form1" method="post" action="">

  <textarea id="pp" name="textarea" cols="60" rows="5"></textarea>

</form>

</body>

</html>

(Lo único que hice es reemplazar los botones por imágenes, manteniendo los idis que tenían los botones)

Panino5001 · #7 (**permalink**) 27/05/2008, 22:55

(si necesitás la manito, agregá a las imágenes un style="cursor:pointer;")

kaninox · #8 (**permalink**) 28/05/2008, 22:01

gracias man me has salvado :)