Saya memperbaiki beberapa bug dalam jawaban yang diberikan oleh Reigel (jawaban yang diterima):
- Urutan di mana entitas html diganti sekarang tidak menyebabkan kode tak terduga dalam elemen bayangan. (Dokumen asli diganti ">" oleh "& ampgt;", menyebabkan perhitungan ketinggian yang salah dalam beberapa kasus yang jarang terjadi).
- Jika teks berakhir dengan baris baru, bayangan sekarang mendapatkan karakter tambahan "#", alih-alih memiliki tinggi tambahan tetap, seperti halnya dalam aslinya.
- Mengubah ukuran teks setelah inisialisasi memperbarui lebar bayangan.
- menambahkan word-wrap: break-word for shadow, jadi itu pecah sama dengan textarea (memaksa istirahat untuk kata-kata yang sangat panjang)
Masih ada beberapa masalah terkait ruang. Saya tidak melihat solusi untuk spasi ganda, mereka ditampilkan sebagai spasi tunggal dalam bayangan (rendering html). Ini tidak dapat dipindahkan dengan menggunakan & nbsp ;, karena spasi harus dipecahkan. Juga, textarea memecah baris setelah spasi, jika tidak ada ruang untuk ruang itu akan memecah baris pada titik sebelumnya. Saran diterima.
Kode yang diperbaiki:
(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));