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
:
Ver original(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/