Corrigi alguns bugs na resposta fornecida por Reigel (a resposta aceita):
- A ordem na qual as entidades html são substituídas agora não causa código inesperado no elemento shadow. (O original substituiu ">" por "& ampgt;", causando cálculo incorreto da altura em alguns casos raros).
- Se o texto terminar com uma nova linha, a sombra agora terá um caractere extra "#", em vez de ter uma altura adicionada fixa, como é o caso no original.
- O redimensionamento da área de texto após a inicialização atualiza a largura da sombra.
- quebra de linha adicionada: quebra de palavra para sombra, por isso quebra o mesmo que uma área de texto (forçando quebras por palavras muito longas)
Ainda existem alguns problemas relacionados a espaços. Não vejo uma solução para espaços duplos, eles são exibidos como espaços únicos na sombra (renderização em html). Isso não pode ser resolvido usando o & nbsp ;, porque os espaços devem se romper. Além disso, a área de texto quebra uma linha após um espaço, se não houver espaço para esse espaço, ela quebrará a linha em um ponto anterior. Sugestões são bem vindas.
Código corrigido:
(function ($) {
$.fn.autogrow = function (options) {
var $this, minHeight, lineHeight, shadow, update;
this.filter('textarea').each(function () {
$this = $(this);
minHeight = $this.height();
lineHeight = $this.css('lineHeight');
$this.css('overflow','hidden');
shadow = $('<div></div>').css({
position: 'absolute',
'word-wrap': 'break-word',
top: -10000,
left: -10000,
width: $this.width(),
fontSize: $this.css('fontSize'),
fontFamily: $this.css('fontFamily'),
lineHeight: $this.css('lineHeight'),
resize: 'none'
}).appendTo(document.body);
update = function () {
shadow.css('width', $(this).width());
var val = this.value.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/\n/g, '<br/>')
.replace(/\s/g,' ');
if (val.indexOf('<br/>', val.length - 5) !== -1) { val += '#'; }
shadow.html(val);
$(this).css('height', Math.max(shadow.height(), minHeight));
};
$this.change(update).keyup(update).keydown(update);
update.apply(this);
});
return this;
};
}(jQuery));