[자바스크립트] textarea 높이 자동조절 (onkeyup, onkeydown)

onkeyup, onkeydown 이벤트를 사용하여 textarea의 높이가 동적으로
조절되는 코드입니다.

html

<textarea id="auto_textarea" onkeyup="autoResize(this)" onkeydown="autoResize(this)" rows="3" style="overflow:hidden;"></textarea>

 

 

이벤트(onkeyup, onkeydown)를 통해서 textarea의 입력을 감지하고, autoResize 함수를 호출해서 textarea의 높이를 조절합니다.

 

자바스크립트

function autoResize(textarea) {
  textarea.style.height = 'auto';
  textarea.style.height = textarea.scrollHeight + 'px';
}

 

autoResize() 함수는 textarea 요소를 매개변수로 받아서, 해당 textarea의 높이를 동적으로 조절합니다. 함수 안에서, textarea의 style.height 속성을 auto로 설정하여 textarea의 높이를 초기화하고, scrollHeight 속성값을 이용하여 textarea의 콘텐츠 높이를 가져와서, textarea의 style.height 속성에 할당합니다.

이렇게 함으로써 textarea의 높이가 자동으로 조절되며, 입력에 따라 동적으로 늘어나고 줄어듭니다.

 

예제 화면

rows 3 으로 설정되어 있어, 라인수가 3줄

이벤트를 통해 height가 자동조절