Tôi đã sửa một vài lỗi trong câu trả lời do Reigel cung cấp (câu trả lời được chấp nhận):
- Thứ tự thay thế các thực thể html bây giờ không gây ra mã không mong muốn trong phần tử bóng. (Bản gốc thay thế ">" bằng "& ampgt;", gây ra tính toán sai về chiều cao trong một số trường hợp hiếm gặp).
- Nếu văn bản kết thúc bằng một dòng mới, bóng bây giờ sẽ có thêm một ký tự "#", thay vì có chiều cao được thêm cố định, như trường hợp trong bản gốc.
- Thay đổi kích thước vùng văn bản sau khi khởi tạo sẽ cập nhật độ rộng của bóng.
- thêm word-quấn: break-word cho bóng, vì vậy nó phá vỡ giống như một textarea (buộc ngắt cho các từ rất dài)
Có một số vấn đề còn lại liên quan đến không gian. Tôi không thấy một giải pháp cho không gian kép, chúng được hiển thị dưới dạng các khoảng trắng trong bóng tối (kết xuất html). Điều này không thể được thực hiện bằng cách sử dụng & nbsp;, vì các khoảng trắng sẽ bị phá vỡ. Ngoài ra, textarea phá vỡ một dòng sau một khoảng trắng, nếu không có chỗ cho không gian đó, nó sẽ phá vỡ dòng ở một điểm trước đó. Đề nghị được chào đón.
Mã sửa lỗi:
(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));