Bom galera, procurei alguma solução para redimensionar a altura de um textarea pelo conteúdo e talvez por eu ser chato não gostei muito das que encontrei, :~ com isso, coloquei a mão na massa e saiu este código logo abaixo, acho que ficou legal. :)
/* OBS: Todos textarea tem que ter id */
(function($) {
$.fn.autosize = function() {
$(this).each(function(){
$(this).css({'overflow' : 'hidden'});
$('body').prepend('<div id="jQuery-autosize-' + $(this).attr('id') + '"></div>');
$('#jQuery-autosize-' + $(this).attr('id')).css({
'display' : 'none',
'word-wrap' : 'break-word',
'font-family' : $(this).css('font-family'),
'padding' : $(this).css('padding'),
'font-size' : $(this).css('font-size'),
'font-padding' : $(this).css('font-padding'),
'font-weight' : $(this).css('font-weight'),
'line-height' : $(this).css('line-height'),
'width' : $(this).width()
});
autosize($(this));
$(this).bind('keyup keypress change', function() {autosize($(this))});
});
};
function autosize(e) {
div_id = '#jQuery-autosize-' + e.attr('id');
val = e.val().replace(/\n/g, '<br />');
$(div_id).empty();
$(div_id).append(val + '<br /><br />');
e.css('height', $(div_id).height());
}
})(jQuery);
Acho que ficou simples e fácil de entender então não tem muito que explicar, é só salvar e incluir em sua página e usá-lo desta forma:
$(function(){$('textarea').autosize();});
Continuar lendo »
