Ho corretto alcuni bug nella risposta fornita da Reigel (la risposta accettata):
- L'ordine in cui vengono sostituite le entità html ora non causa codice imprevisto nell'elemento shadow. (L'originale ha sostituito ">" con "& ampgt;", causando un calcolo errato dell'altezza in alcuni rari casi).
- Se il testo termina con una nuova riga, l'ombra ora ottiene un carattere aggiuntivo "#", invece di avere un'altezza aggiunta fissa, come nel caso dell'originale.
- Il ridimensionamento dell'area di testo dopo l'inizializzazione aggiorna la larghezza dell'ombra.
- aggiunto a capo automatico: break-word per shadow, quindi si rompe come una textarea (forzando le pause per parole molto lunghe)
Ci sono alcuni problemi rimanenti riguardanti gli spazi. Non vedo una soluzione per i doppi spazi, sono visualizzati come singoli spazi nell'ombra (rendering html). Questo non può essere sostituito usando & nbsp ;, perché gli spazi dovrebbero rompersi. Inoltre, l'area di testo interrompe una linea dopo uno spazio, se non c'è spazio per quello spazio, interromperà la linea in un punto precedente. Suggerimenti sono ben accetti
Codice corretto:
(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));