Agrandar TextArea

cslbcn · #1 (**permalink**) 27/12/2009, 08:42

Hola. Los textarea me llevan por el camino de la amargura...

Con este código, si se hace un salto de línea, el textarea se hace más grande (+1 rows). Hasta aquí todo perfecto. El problema está en que cuando escribo una frase tan larga que una linea no cabe, salta la segunda fila, hace "un salto de linea" y no sé como detectar eso.

Sólo puedo detectar los saltos de linea hechos con el intro: lineas=area.split('\n');

Pero como puedo detectar un salto de linea solo escribiendo texto?

Os pongo un enlace con un ejemplo.
http://www.unwrongest.com/projects/elastic/

Más abajo está mi codigo.
P.D. No quiero recurrir a un código ya hecho como el del ejemplo.

Código Javascript:

Ver originalfunction agrandar(e){       
            
var code = (document.all) ? event.keyCode:e.which;
var ctrl = (document.all) ? event.ctrlKey:e.modifiers & Event.CONTROL_MASK;
                    
var k=null;
(e.keyCode) ? k=e.keyCode : k=e.which;
area=document.forms['formulario'].TAestado.value;
lineas=area.split('\n');
            
for(i in lineas){
    var ubound=i;
}       
            
ubound=new Number(ubound)+1;
if (ubound>10){
    document.forms['formulario'].TAestado.rows=10;
    document.getElementById('TAestado').className="TAestadoMax";
}else{
if(k==13 ){             
                
    document.forms['formulario'].TAestado.rows
        document.forms['formulario'].TAestado.rows +1;  
}
else
{
    document.forms['formulario'].TAestado.rows=ubound;
    document.getElementById('TAestado').className="TAestadoNor";
}                   
}
if (ubound==1){
document.forms['formulario'].TAestado.rows=2;
}                       
}

Código HTML:

Ver original<textarea  style="width:700px" rows="1" Id="TAestado" onkeydown="agrandar(event)" >¿En qué piensas?</textarea>

jackson666 · #2 (**permalink**) 27/12/2009, 08:50

Y si preguntas por la cantidad de caracteres que hay en una linea? Y si son igual al maximo permitido que agregue una fila mas...

Panino5001 · #3 (**permalink**) 27/12/2009, 08:57

Esto puede ayudarte: http://www.disegnocentell.com.ar/notas2.php?id=232
Aclaro, por si acaso: la idea sería crear un elemento oculto auxiliar que te ayude a determinar la cantidad de renglones escritos en el textarea (una capa oculta con position absolute y left:-1500px, por ejemplo y el mismo ancho (offsetWidth) que el textarea).

cslbcn · #4 (**permalink**) 27/12/2009, 09:02

jackson666, probé de hacerlo así pero el ancho de cada caracter es diferente y una línea nunca tendría en mismo número de caracteres que las demás, a no ser que use un tipo de letra como la del bloc de notas, pero queda feo...

Panino, ahora miro el ejemplo y a ver si puedo adaptarlo e mis necesidades.

Gracias

Panino5001 · #5 (**permalink**) 27/12/2009, 09:07

Ojo, ahí hice alguna aclaración a mi anterior mensaje para que veas que no podrás usar esa técnica directamente sino adaptándola.

cslbcn · #6 (**permalink**) 27/12/2009, 09:40

por más que lo mire, no veo que puedo sacar para usarlo en lo que quiero conseguir. En ese ejemplo muestra solo 5 lineas de un texto con muchas más lineas, pero el ancho del objeto ya está definido.

No existe en JS alguna función que obtenga una fila en concreto? Algo como esto:
document.forms['formulario'].textarea.row[0].value);
document.forms['formulario'].textarea.row[0].length);

Panino5001 · #7 (**permalink**) 27/12/2009, 17:41

Bueno, no importa en realidad. Estuve viendo que sería más sencillo hacerlo así, si es que entendí bien lo que necesitás:

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>Documento sin t&iacute;tulo</title> 
<script> 
function verificar(o){ 
    if(o.scrollHeight>o.clientHeight)o.rows+=1; 
} 
</script> 
</head> 
 
<body> 
<form id="form1" name="form1" method="post" action=""> 
  <textarea style="overflow-x:hidden;overflow:hidden;" onkeydown="verificar(this)" name="textarea" rows="5" id="textarea"></textarea> 
</form> 
</body> 
</html>

cslbcn · #8 (**permalink**) 28/12/2009, 14:01

Esto funciona siempre y cuando se escriben lineas, pero cuando se borra texto el alto del textarea no disminuye. Intento usar este codigo tuyo con el mio pero no funciona bien, me hago un lio.

sabes como poder hacerlo?

Gracias

Panino5001 · #9 (**permalink**) 29/12/2009, 02:25

Probá de esta manera:

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>Documento sin t&iacute;tulo</title> 
<script> 
function verificar(o){ 
    var s=o.value.split('\n').length;
    o.rows=(o.value.length/o.cols)+s;
} 
onload=function(){
    setInterval(function(){verificar(document.getElementById('textarea'));},30);
}
</script> 
</head> 

<body> 
<form id="form1" name="form1" method="post" action=""> 
  <textarea style="overflow-x:hidden;overflow:hidden;" name="textarea" cols="20" rows="5" id="textarea"></textarea> 
</form> 
</body> 
</html>

cslbcn · #10 (**permalink**) 29/12/2009, 10:51

No funciona bien del todo. Ocurre el mismo problema que me pasa a mi.
con "o.value.length" está cogiendo el valor del textarea desde el primer caracter hasta el último.

Todo el problema sucede cuando se escribe una palabra que no cabe en la fila en la que uno está situado y salta a la siguiente.

cslbcn · #11 (**permalink**) 29/12/2009, 11:13

Respuesta encontrada!!!! en este mismo foro

http://www.forosdelweb.com/f13/conta...xtarea-249811/

respuesta numero 5.

Por fin!!! Gracias ForosDelWeb!!!