textarea 태그 높이 자동으로 조절하는 방법

textarea의 경우 height: auto; 속성값을 사용하여 자동으로 높이 조절이 되지 않습니다. 그래서 만약 글이 길어질 경우 스크롤을 내려야만 하는 불편함이 생기게됩니다. 그렇다면 글이 길면 자동으로 길어지는 textarea 태그를 구현하면 사용자 입장에서 매우 편리할 것입니다. 아래는 이를 구현하기 위한 방법입니다.

# textarea 자동으로 높이 조절하기

자바스크립트를 사용해 자동으로 height가 조절되는 코드를 구현하려면 가장 먼저 현재 textarea 태그가 가진 높이를 알아야만 합니다. 이때 주의할 사항으로 어떤 height값을 알아야하는지가 매우 중요합니다.

요소의 높이(Height)는 여러가지 값이 존재하면 일반적으로 innerHeight, outerHeight 등이 있습니다. 이들은 내부 또는 외부 크기를 반환합니다. 하지만  textarea 태그는 높이는 동일하고 내부에 스크롤이 생기기 때문에 스크롤 영역을 포함하는 높이를 알아야 합니다. 이때 prop() 제이쿼리 메소드와 내부값으로 scrollHeight를 아래처럼 사용합니다.

선택요소.prop('scrollHeight');


scrollHeight는 해당하는 요소의 스크롤 크기를 반환해줍니다. 그래서 보이는 영역에서 스코롤로 가려진 영역까지 알수가 있습니다. 우리가 원하는 로직은 다음과 같습니다.


! textarea 자동높이 함수 구현 로직 아래와 같이 구현하고자 합니다.

• 1. 사용자가 글을 작성
• 2. 글이 늘어남에 따라 textarea에 이벤트가 발생
• 3. 이벤트를 감지해 그 시점의 스크롤하이트를 계산
• 4. 이 값을 height 속성에 값으로 적용
  

그럼 아래는 위 로직을 구현한 예제소스입니다.

# textarea태그 높이(Height) 자동조절 예제보기

textarea를 사용하여 간단한 입력폼을 만들고 글이 길어지면 자동으로 조절되도록 만드려고 합니다. 이때 사용할 스크립트 코드는 아래와 같이 사용할 수 있죠.

위 코드는 textarea를 자동으로 조절하는 함수 adjustHeight()의 소스코드입니다. 위 함수를 실행하면 textarea의 높이를 찾아서 바로 적용됩니다.

! 높이가 줄어들 경우의 팁

textEle[0].style.height = 'auto';

여기서 알아두어야 할 부분으로 위의 부분입니다. 현재 height값이 들어간 상태로 scrollHeight를 구하면 기존 높이보다 줄어드는 경우 이미 적용된 style 값 때문에 정확한 높이가 반영되지 않습니다. 이런 이유로 기존의 height 값을 삭제한 후(초기화) 높이값을 반영해야합니다.

아래는 이 함수에 키보드 이벤트를 추가해보도록 하겠습니다. 이벤트는 키보드가 입력될 경우 adjustHeight()를 호출하여 길이를 조절하게 됩니다.

! textarea에 키보드 이벤트를 통해 adjustHeight()를 실행

해당 요소인 textarea에 다음과 같이 키보드 이벤트를 추가해 이벤트 발생 함수를 실행하게 하면 간단하게 작성시 자동으로 조절됩니다. 코드는 아래와 같습니다.

@ auto_textarea.html

아래는 스크립트 코드입니다. 키보드 이벤트를 등록합니다.

위에 보이는 이벤트 코드에서 사용된 keyup 이벤트는 키보드가 눌러진 뒤 다시 올라갈때 발생합니다. 즉 키보드를 누르고 있는 경우는 이벤트가 발생하지 않습니다.

! Textarea 태그에 이벤트 적용하기

또는 아래처럼 <textarea> 태그에 추가하는 것도 가능합니다

여기까지 자동 높이 조절되는 textarea에 대하여 알아보았습니다.

# 실제로 동작해보기

위 예제를 실제로 구현하면 어떻게 될까요? 아래에 글을 적으면서 직접 테스트해보기 바랍니다.