Pinceladas da Web

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 »