자바스크립트 textarea 자동 높이 조절

 

keydown : 키보드를 눌렀을 때

keyup : 키보드에서 손을 뗐을 때

 

textarea는 height의 값을 넣어주지 않으면 높이 값이 변하지 않는다.

그래서 콘텐츠가 보이는 부분을 넘어가면 스크롤 바가 생기게 되는데 스크롤 바의 높이를 height 값으로 준다.

 

문제는 콘텐츠가 줄어들었을 때 어떻게 height를 줄일까인데 

그 부분은 기본 값인 textarea의 height를 auto 상태로 만들어주면 

콘텐츠만큼의 스크롤 바 높이를 가지게 된다.

 

즉 height auto로 가진 콘텐츠만큼의 스크롤 바 높이를 만들어주고

그다음 스크롤 바 높이를 textarea height의 값으로 설정해 주면 keydown은 누르고 있을 시 계속해서 동작하며

keyup은 키보드에서 손을 뗐을 때 동작하므로 자동으로 높이가 조절되는 textarea를 만들 수 있다. 

See the Pen ExZBWgX by CodingCitron (@codingcitron) on CodePen.

 

2개가 필요할 때는 이런 방법으로

See the Pen qBRzxPw by CodingCitron (@codingcitron) on CodePen.