[APORTE] Sencilla función en jquery para que el textarea se ajuste al texto auto

[manuparquegiralda]

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:

<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:

function 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

[Maganius]

Gracias por el aporte! seguramente a muchos le servirá.

Tal vez quede mejor así para no tener que pasar un ID siempre

Código HTML:

<textarea cols="60" style="resize:none; overflow:hidden; width: 250px; height:80px;" onKeyUp="controlTextArea(80);"></textarea>
 

Código Javascript:

function controlTextArea(altInicial){
    var altoExt = $(this).height();
    var altoInt = $(this).scrollHeight;
    if(altoInt > altoExt){
        $(this).animate({
            height: altoInt+"px"
        },"fast");
    }else{
        $(this).css({
            height: altInicial+"px"
        });
        if(altoInt > altInicial){
            $(this).css({
                height: altoInt+"px"
            });
        }
    }
}
 

No entiendo porque en el ELSE haces la misma comprobación que en el IF? no lo probe por lo que estaba en duda si borrarlo o no.

[manuparquegiralda]

Iniciado por Maganius

No entiendo porque en el ELSE haces la misma comprobación que en el IF? no lo probe por lo que estaba en duda si borrarlo o no.

Vale, es que en tu función no has puesto esta linea: var altoInt = $("#"+textArea).get(0).scrollHeight;. En el else te vuelve a coger el alto del scrollheight después de haber puesto el textarea en su alto original y seguidamente te vuelve poner el alto de éste en el textarea. Se utiliza para cuando se está borrando y queremos que el textarea reduzca su tamaño.

Iniciado por Maganius

Tal vez quede mejor así para no tener que pasar un ID siempre

Puse el ID para los recien iniciados en javascript, pero gracias por tur respuesta.