Solucioné algunos errores en la respuesta proporcionada por Reigel (la respuesta aceptada):
- El orden en que se reemplazan las entidades html ahora no causa código inesperado en el elemento sombra. (El original reemplazó ">" por "& ampgt;", causando un cálculo incorrecto de la altura en algunos casos raros).
- Si el texto termina con una nueva línea, la sombra ahora obtiene un carácter adicional "#", en lugar de tener una altura adicional fija, como es el caso en el original.
- Cambiar el tamaño del área de texto después de la inicialización actualiza el ancho de la sombra.
- ajuste de palabra agregado: palabra de interrupción para sombra, por lo que se rompe igual que un área de texto (forzando interrupciones para palabras muy largas)
Hay algunos problemas pendientes con respecto a los espacios. No veo una solución para los espacios dobles, se muestran como espacios individuales en la sombra (representación html). Esto no puede solucionarse usando & nbsp ;, porque los espacios deberían romperse. Además, el área de texto rompe una línea después de un espacio, si no hay espacio para ese espacio, romperá la línea en un punto anterior. Las sugerencias son bienvenidas.
Código corregido:
(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));