jQuery plugin: Redimensionar a altura de um textarea pelo conteúdo

Postado por: Anderson Custódio de Oliveira em

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();});

Update 15/09/2010: Bom galera, está ai o plugin com a correção do bug que comentei abaixo. Não fiquei muito orgulhoso desse porque ficou meio gambiarra, mas funciona. :D

Update 15/09/2010 [2]: Galera, desculpa por ficar atualizando este post, arrumei mais um bug, não estava funcionando quando tinha vários textarea na mesma página, agora está tudo certo. Próximo script deste tipo irei postar em um arquivo separado para evitar este monte de edição. :/

Testei no IE6, IE7, IE8, Firefox, Chrome e Opera.

Sem alguém tiver algum problema ou se preferir tem está outra solução que recomendo.

Qualquer dúvida só perguntar! :D

Posts Relacionados

Confira também outros artigos interessantes postados aqui no blog.

Gostou desse post?

Assine o nosso Feed RSS, siga-nos no Twitter, ou simplesmente nos recomende a seus amigos!

6 Responses to “jQuery plugin: Redimensionar a altura de um textarea pelo conteúdo”

  1. Lucas disse:

    como faz para adicionar apenas a um textarea? não entendo jquery mt bem, mais ai parece que não está direcionando apenas para uma classe ou id.

    vlw =D

  2. Paulo disse:

    Lucas, você coloca a id do campo que você quer, como descrito abaixo:

    $(function(){$(‘#texto’).autosize();});

    a tralha (#) indica se é uma id e (.) ponto para uma class. como no css.

    Ah valeu pela dica Anderson, ficou show mesmo!

  3. Lucas disse:

    Showw paulo, vo começar a implementar isso nos meus site, vlw pela dica Anderson

  4. Galera tem um pequeno bug, não comentei antes aqui para informar direto no post.

    Para verificar a nova linha e assim aumentar a altura do textarea usei o split("\n"), se a frase não for muito grande e não quebrar de linha fica sem problema, que foi como eu testei, :~ mas se tiver uma frase grande ela quebra a linha automaticamente e fica sem o "\n" para informar que tem uma nova linha.

    Fiquem tranquilos, já to acertando isso, só vai precisar atualizar o plugin, o código para ativa-lo será o mesmo.

    Desculpem pelo erro e vlw! (:

  5. Stephany Henrique disse:

    Parabéns, vou testar

  6. Luiz Barros disse:

    Funciona muito bem, Anderson. Mas posso sugerir uma coisa? Depois de preenchido o textarea e salvo, como fazer para recarregar a página com o textarea do tamanho que o texto deixou? Como está agora, eu tenho que clicar no texto e adicionar uma letra pra ver todo o conteúdo, pode ser até no mouseover.

Leave a Reply