Alguna alternativa para escribir prototypes con Objetos jQuery

[junihh]

Hola señores

Luego de mucha prueba-error e investigar, encontré la forma cómo hacer que la altura (rows) de un textarea sea modificada según la cantidad de líneas de texto, tal como pasa en los comentarios de Facebook.

El caso es que traté de guardar dicho efecto a modo de Prototype de la siguiente forma:

Código HTML:

Object.prototype.resizeTextarea = function()
{
	//
};

Con sólo esas líneas se rompió todo. Luego de investigar la razón, encontré que no se puede declarar prototypes de objetos. Antes ya había declarado para strings y numbers, pero ni modo.

Me gustaría guardar dicho efecto como una función para subsecuentes proyectos. ¿Existe alguna alternativa en jQuery para tal cosa?

Acá dejo la función aplicado directamente al objeto:

Código HTML:

$('textarea').bind('keyup',function()
{
	var scrollH = $(this).prop('scrollHeight');
	var paddingTB = parseFloat($(this).css('paddingTop')) + parseFloat($(this).css('paddingBottom'));
	var lineH = parseFloat($(this).css('lineHeight'));
			
	$(this).attr('rows',(scrollH - paddingTB) / lineH);
});

[Naahuel]

Podrías hacerlo en forma de plugin:

Código Javascript:

(function($){
    $.fn.extend({
        // nombre de tu plugin, y parámetros
        resizeTextarea: function(parametros) {
        var defaults = {
            opcion: 'valor',
            otraOpcion: 'otro valor'
        }
        
        var parametros =  $.extend(defaults, parametros);
         
            return this.each(function() {
                //aqui hacés lo que querés con el elemento
                $elem = $(this)
                $elem.bind('keyup',function(){
                    var scrollH = $(this).prop('scrollHeight');
                    var paddingTB = parseFloat($(this).css('paddingTop')) + parseFloat($(this).css('paddingBottom'));
                    var lineH = parseFloat($(this).css('lineHeight'));
                            
                    $(this).attr('rows',(scrollH - paddingTB) / lineH);
                });
            });
        }
    }); 
})(jQuery);
 

Eso lo guardás en un archivo aparte y lo incluís después de jQuery, antes que tus scripts. Después lo podés usar así, por ejemplo:

Código Javascript:

$('textarea').resizeTextarea();
 

Buscá cómo se hace un plugin para jQuery, porque hay muchas cosas a considerar para optimizar el código y que funcione bien. Además, fijate en el uso de opciones. Yo te puse unos parámetros de ejemplo. Esos sirven para configurar el plugin cuando lo llamas. Algo así:

Código Javascript:

$('textarea').resizeTextarea({
    opcion: 'aqui doy mi valor'
});
 

Por cierto, tu código no me funciona :P

[junihh]

uff, esperaba no tener que recibir precisamente esa respuesta: Hacer un plugin. Pues de no haber otra alternativa lo aplicaré entonces así. Muchas gracias por tu respuesta Naahuel.

[junihh]

Hola Naahuel

Volví a leer tu respuesta para ver el ejemplo de plugin y no había notado tu comentario que no funcionó mi código. Traté de preparar un jsFiddle y ciertamente no funcionó, sin embargo, curiosamente funciona muy bien como lo tengo tengo aplicado.

Lo usé en este formulario de contacto. Si quieres ver el código, puedes ir acá y buscar fMessage.bind en el que lo verás aplicado.

Realmente se me hizo curioso que no funcionara en jsFiddle, como si algo le faltara cuando realmente no es así.

[Naahuel]

Respecto a tu primera respuesta: ¿Por qué no un plugin? Es lo mejor. Si lo hacés bien, lo podés hacer muy efectivo y sobre todo, reutilizable. Además podés aplicarlo con un solo selector, en muchos elementos de la página. No es complicado para nada :)

El problema con tu script (aparentemente) es que usás el método .css() para obtener las dimensiones y propiedades del textarea. El problema de esto es que estas propiedades pueden ser (al menos para line-height) normal, inherit, etc. Acá es donde falla, si no se ha definido una hoja de estilos con valores numéricos.

Lo hice de otra forma y creo que funciona igual que el tuyo:

Código Javascript:

(function($){
    $.fn.extend({
        // nombre de tu plugin, y parámetros
        resizeTextarea: function(parametros) {
        var defaults = {
            animacion: 0,    //por defecto, no animamos
            offset: 5        //sumar este offset a la altura para corregir
        }
        
        var parametros =  $.extend(defaults, parametros);
         
            return this.each(function() {
                //aqui hacés lo que querés con el elemento
                $elem = $(this)
                $elem.css('overflow','hidden') //para que no moleste la barra
                $elem.bind('keyup',function(){
                    var $_ta = $(this);
                    var i_st = $_ta.scrollTop();
                    if(i_st){
                        $_ta.animate({
                            height: '+=' + (i_st + parametros.offset)
                        },parametros.animacion);
                    }
                });
            });
        }
    }); 
})(jQuery);​
 

Fijate que le aplico overflow:hidden. Esto es para que la barra desplazadora no "flashee" y moleste. Queda más elegante. Además, el plugin hacepta un valor de animación por si querés hacer la transición con un efectito. Creo que este nuevo método es mejor porque no depende de los valores de CSS.

Ejemplo: http://jsfiddle.net/WZ6FY/1/

[junihh]

Pues vaya que está muy bien como funciona. Precisamente estaba pensando una alternativa para el molesto flasheo que mencionas de la barra. Nuevamente gracias por tu respuesta y ejemplos, me han sido de mucha ayuda.