Extender textarea

almagropaco_ · #1 (**permalink**) 25/11/2009, 10:55

Hola, ya postie esto en css, pero igual tengo la duda si es en css y javascript o un mix de los dos. Vamos a mi duda.

Cita:

Bueno, mi consulta es si puedo extender un textarea, alargarlo, como facebook, que al escribir, el textarea siempre tiene la altura que el texto, bueno, tiene un maximo, eso calculo que se hara con max-height(css), lo que quiero saber es como se hace para que se extienda, bueno, una imagen vale mas que mil palabras.

Lo explico de vuelta, a medida que yo salto de linea, no aparece la flechita para bajar, si no que el textarea se agranda, eso es lo que quiero lograr.

bebo · #2 (**permalink**) 25/11/2009, 11:22

Prueba con este codigo:

Código html:

Ver original<textarea rows=1 onkeyup="agrandar()" name="texto"></textarea>
 
<script>
function agrandar(){
area=texto.value;
lineas=area.split("\n");
for(i in lineas){
var ubound=i;
}
ubound=new Number(ubound)+1;
texto.rows=ubound;
}
</script>

bebo · #3 (**permalink**) 25/11/2009, 11:22

El código anterior sólo funciona con IE, este funciona también con Mozilla:

Código:

<script>
function agrandar(){
area=document.forms['formulario'].texto.value;
lineas=area.split("\n");
for(i in lineas){
var ubound=i;
}
ubound=new Number(ubound)+1;
document.forms['formulario'].texto.rows=ubound;
}
</script>

<form name=formulario>
<textarea rows=1 onkeyup="agrandar()" name="texto"></textarea>
</form>

almagropaco_ · #4 (**permalink**) 25/11/2009, 11:41

Pense que iba a funcionar, pero no, raro que no funcione.

bebo · #5 (**permalink**) 25/11/2009, 11:43

¿Con que navegador lo probaste?

almagropaco_ · #6 (**permalink**) 25/11/2009, 11:45

Chrome y luego firefox.
No habia visto el codigo que dijiste que funciona con firefox, ya lo pruebo.

almagropaco_ · #7 (**permalink**) 25/11/2009, 11:49

El tema es que si escribo todo seguido se crea la flechita, y no se agranda el textarea, eso ya que la funcion solo se ejecuta onkeyup=""..

almagropaco_ · #8 (**permalink**) 25/11/2009, 11:53

Problema: Si escribo todo seguido sin salto de linea no se agranda, habra que usar un metodo diferente a onkeyup, igual muchas gracias, el tema de ponerle un maximo lo solucione con max-height, css

bebo · #9 (**permalink**) 27/11/2009, 12:59

Trata con esto:

Código:

<script>
function agrandar(){
area=document.forms['formulario'].texto.value;
lineas=area.split("\n");
for(i in lineas){
var ubound=i;
}
ubound=new Number(ubound)+1;
document.forms['formulario'].texto.rows=ubound;
var linea=new Array();
for(i in lineas){
linea[i]=new Number(lineas[i].length);
}
var max=linea.sort(function(a,b){return a-b});
var maximo=new String(max).split(",");
for(i in maximo){var num_maximo=i}//alert(num_maximo);
document.forms['formulario'].texto.cols=maximo[num_maximo]
}
</script>
<form name=formulario>
Texto:
<textarea rows=1 onkeyup="agrandar()" name="texto"></textarea>
</form>

Adler · #10 (**permalink**) 27/11/2009, 13:47

Hola

Justo hace un momento acabo de finalizar un script para un colega. Por si los que ya te dejaron no funciona

Código javascript:

Ver original<!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=utf-8" />
 
<script type="text/javascript">
var nuevaFila = {
 
Evento: function (elemento,nomevento,funcion) {
  if (elemento.attachEvent)
  {
      var f=function(){
        funcion.call(elemento,window.event);
    }
    elemento.attachEvent('on'+nomevento,f);
    return true;
  }
  else  
    if (elemento.addEventListener)
    {
      elemento.addEventListener(nomevento,funcion,false);
      return true;
    }
    else
      return false;
},
 
 
 
init: function(){
var elem = document.getElementById("txt");
        nuevaFila.Evento(elem, 'keyup', nuevaFila.CreaFila);
    },
 
 
CreaFila: function (ev) {
var num_caracteresIrreales;
var num_caracteresReales;
var keyCode = document.layers ? ev.which : document.all ? event.keyCode : document.getElementById ? ev.keyCode : 0;
var elem = document.getElementById("txt");
num_caracteresIrreales = elem.rows * 26;
num_caracteresReales = elem.value.length;
 
if (keyCode == 8) {
if ((num_caracteresReales < (num_caracteresIrreales-26)) && (elem.rows >=2)) {
elem.rows-= 1;
}
 
} else if (num_caracteresReales == num_caracteresIrreales) {
elem.rows+= 1;
 
} else if (keyCode == 13) {
elem.rows+= 1;
num_caracteresIrreales = 26;
num_caracteresReales = 0;
}
}
}
nuevaFila.Evento(window, 'load', nuevaFila.init); 
</script>
</head>
<body>
<textarea name="txt" id="txt" cols="30" rows="1" style="overflow:hidden;"></textarea>
</body>
</html>

Suerte

almagropaco_ · #11 (**permalink**) 06/12/2009, 14:49

Probe todos, ninguno me funciona a la perfeccion.
Encontre un script hecho con jQuery, http://www.unwrongest.com/projects/elastic/#demo