Reigel이 제공 한 답변 (허용 된 답변)에서 몇 가지 버그가 수정되었습니다.
- HTML 엔터티가 교체되는 순서로 인해 shadow 요소에 예기치 않은 코드가 발생하지 않습니다. (원본이 ">"를 "& amp";로 대체하여 드문 경우에 높이를 잘못 계산했습니다.)
- 텍스트가 줄 바꿈으로 끝나는 경우 그림자는 원래와 같이 고정 된 높이를 추가하는 대신 추가 문자 "#"를 갖습니다.
- 초기화 후 텍스트 영역의 크기를 조정하면 그림자 너비가 업데이트됩니다.
- 추가 단어 줄 바꿈 : 그림자의 단어 분리, 텍스트 영역과 동일하게 끊기 (매우 긴 단어의 경우 강제 중단)
공백과 관련하여 몇 가지 남아있는 문제가 있습니다. 이중 공백에 대한 솔루션이 보이지 않고 그림자에서 단일 공백으로 표시됩니다 (html 렌더링). 공백이 없어야하기 때문에 & nbsp;를 사용하여 풀 수 없습니다. 또한 텍스트 영역은 공백 다음에 줄을 끊습니다. 해당 공간을위한 공간이 없으면 이전 지점에서 줄을 끊습니다. 제안은 환영합니다.
수정 된 코드 :
(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));