Buenas, me he enfrentado varias veces al siguiente problema de querer hacer que un textarea se ajuste al alto del contenido que voy escribiendo en el interior.
Para Jquery hay varios plugins, pero no me gusta usar plugins en mis páginas ya que al final te llenas de códigos de terceros y... bueno es una mania personal. Así que encabezonado en conseguir ese efecto utilizando el menor código posible lo he conseguido con una función Jquery de 19 sencillas lineas.
Al estar buscando por aquí la solución antes de lograrla y no encontrarla voy a postearla aquí por si a alguien pudiera interesearle usarla.
Código HTML:
Ver original<textarea id="textareaID" cols="60" style="resize:none; overflow:hidden; width: 250px; height:80px;" onKeyUp="controlTextArea('textareaID',80);"></textarea>
Aquí tenemos un textarea simple, pero con las dimensiones definidas en el style en lugar de en rows y cols. Y en el evento "onkeUp" llamamos a la función siguiente, pasando los siguientes parámetros, el id del textarea sobre el que se está actuando y el alto incicial que le hemos dado al textarea en nuestro "style" en este caso "80".
Código Javascript
:
Ver originalfunction controlTextArea(textArea,altInicial){
var altoExt = $("#"+textArea).height();
var altoInt = $("#"+textArea).get(0).scrollHeight;
if(altoInt > altoExt){
$("#"+textArea).animate({
height: altoInt+"px"
},"fast");
}else{
$("#"+textArea).css({
height: altInicial+"px"
});
var altoInt = $("#"+textArea).get(0).scrollHeight;
if(altoInt > altInicial){
$("#"+textArea).css({
height: altoInt+"px"
});
}
}
}
La función Jquery lo que hace es coger el alto actual del textarea y el alto del scroll actual del mismo. Si el alto del scroll (lo que llevamos escrito) es mayor al alto actual, el textarea crece hasta igualarse con el alto del scroll, que será el alto que esté ocupando lo que llevamos escrito. Si por el contrario es menor, pasaremos el textarea a su alto original y seguidamente volvemos a coger el alto del scroll. Si el scroll es más alto que el alto inicial le volvemos a dar el alto del interior al textarea. Pero esta segunda vez lo hacemos sin el animate para que no se vea crecer de nuevo desde la altura inicial.
Como veis es una función muy simple y bastante funcional que cualquiera puede adapatar a sus necesidades y así evitar pluggins con mucho código que al final relentizan la carga de nuestra página.
Espero que les sirva
