ajustar tamaño de textarea al contenido

kinyiro_360 · #1 (**permalink**) 17/09/2012, 11:09

hola a todos

quisiera saber si hay alguna forma de cambiar el tamaño de un textarea dependiendo del texto que se le introdusca agregar lineas o quitarlas

da antemano muchas gracias

nilburcion · #2 (**permalink**) 17/09/2012, 12:10

Prueba con esto:

Código HTML:

<textarea id="pr1" onkeydown="if(window.event.keyCode==13){if (this.value.split('\n').length!=0) {this.rows=this.value.split('\n').length+2}else{this.rows=2}}else{if (this.value.split('\n').length!=0) {this.rows=this.value.split('\n').length+1}else{this.rows=2}}" rows="2"></textarea>

kinyiro_360 · #3 (**permalink**) 17/09/2012, 12:25

no funciona sale la barra de desplazamiento por un lado

kinyiro_360 · #4 (**permalink**) 18/09/2012, 13:35

bueno aqui les deja la solucion que encontre 100% funcional

http://www.jacklmoore.com/autosize

saludos

furoya · #5 (**permalink**) 23/09/2012, 13:52

Pensé que una library para esto era un despropósito. Pero resulta que estamos tratando de modificar el comportamiento de un textarea; y eso es algo complicado.

Por lo general, si nos animamos a hacerlo en javascript, el código y la incompatibilidad son enormes. Agregar un archivo *.js propio es lo mismo que uno ajeno.

Tu ejemplo no está mal, nilburcion. El problema es que reconoce el break en el teclado, no en el valor; entonces no contempla el pegado o arrastre de texto.
Otro punto es que está pensado para textarea's que no hacen wrapping, que se maneja con lineas reales y no virtuales. Y no contempla un ajuste por ancho; aunque esto puede ser discutible, ya que el documento "crece a lo alto" y si estiramos mucho el ancho de un elemento también se deforma mucho la página. Puede ser mejor mantenerle el scrollbar horizontal.

Con esa premisa, me puse a mejorar tu código.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>Textareas autoajustables.</title>
<script type="text/javascript">
	/* EJEMPLO 1 */
function agranda1(T){
var lineasReales = (T.value).split("\n").length; 
T.rows = lineasReales + 1; 
}

	/* EJEMPLO 2 */
var miTXTA;
var vuelta = 1;
function agranda2(){
miTXTA = document.getElementById("pr2");

var lineasVirtuales = miTXTA.scrollHeight; 

miTXTA.style.height = lineasVirtuales +"px";

setTimeout(achica2 , 20); 
}

function achica2(){
if (vuelta == 0){
vuelta = 1; 
}

else {
miTXTA.style.height = "auto";
vuelta = 0;
agranda2();
}
}
</script>
<style type="text/css">
#pr1 {white-space: pre; display: block; overflow-y: hidden; overflow-x: scroll; 
font: 12px/15px monospace; } /*EJEMPLO 1 */
#pr2 {display: block; overflow-y: hidden; font: 12px/15px monospace; } /*EJEMPLO 2 */
</style>
</head>
<body>
<h2>Textareas autoajustables.</h2>

<h3>Con ancho fijo de 20 columnas. Sin ajuste de linea 
(desborde horizontal con scrollbar).<h3>

<textarea id=pr1 wrap=off cols=20 rows="3"
onmouseup="agranda1(this)" 
oninput="agranda1(this)" 
onkeyup="agranda1(this)" ></textarea> 

<h3>Con ancho fijo de 20 columnas. Con ajuste de linea 
(sin scrollbar).<h3>

<textarea id=pr2 cols=20 
onmouseup="agranda2()" 
onpaste="agranda2()" 
oncut="agranda2()" 
oninput="agranda2()" 
onkeydown="agranda2()" 
></textarea> 

</body>
</html>

Aún tienen mil bugs, pero sirven para trabajarlos un poco.

Bien. No tengo idea de cuáles eran los requerimientos de tu textarea autoajustable, kinyiro_360, porque solamente te limitaste a decir que el ejemplo que te dejaron no funciona porque le salía la barra de desplazamiento por un lado; y debo suponer que no tienes idea de cómo funciona ese código. Nada más esperabas que te hicieran un cut&paste.
Supongo que te referías justamente a la barra horizontal. Y no es que no se pueda hacer que se agrande o achique también a lo ancho, pero no sé si se justifica el esfuerzo. Y el efecto. ¿Qué se puede ganar con eso?

Por otro lado, es una pregunta que se hizo varias veces. No te costaba nada hacer una búsqueda antes de postear, quizá entonces encontrabas algo que te podía servir.
Acá puse un truco que hoy me parece bastante digno ...

textarea ajustable