textarea 자동 사이즈 조절하기

자바스크립트

function resize(obj) {
    obj.style.height = '1px';
    obj.style.height = (10+obj.scrollHeight)+'px'; 
    //10이라는 숫자는 처음 keydown될때 늘어나는 height값(숫자설정을 안해도 무관하다.)
}

---

제이쿼리

function resize(obj) {
    $(obj).css('height','1px');
    $(obj).css('height',$(obj).prop('scrollHeight') + 'px';
}

//또는
function resize(obj) {
    var scroll = $(obj).prop('scrollHeight');
	
    $(obj).css('height','1px');
    $(obj).css('height',scroll + 'px');
}

//또는
$('textarea').on('keydown keyup', function() {
  $(this).height(1).height($(this).prop('scrollHeight')+10);
  //10이라는 숫자는 처음 keydown될때 늘어나는 height값(숫자설정을 안해도 무관하다.)
});

 

만들어 놓은 함수를 필요한 textarea에 onkeydown, onkeyup 이벤트에 넣어서 사용한다.

<textarea name="" id="" onkeydown="resize(this)" onkeyup="resize(this)"></textarea>