[JQuery] 동적으로 생성된 Textarea에 자동 높이 이벤트 바인딩

[JQuery] 동적으로 생성된 Textarea에 

자동 높이 이벤트 바인딩

IE8부터 Textarea의 높이값이 자동으로 증가되지 않아, 자바스크립트나 제이쿼리를 사용해

자동으로 높이를 늘리는 방식을 많이 사용하고 있다. 순수 CSS를 찾아보려고 노력해 봤지만 특별히 원하는 결과가 나오지 않았다.

기존 Textarea의 Element가 DOM에 있을 때의 자동으로 높이값을 주는 방식은 이미 구글에서도 자동으로 높이값을 늘릴 수 있는 방법이 나와있지만, 동적으로 Textarea가 생성됬을 때 자동으로 높이 값을 설정 할 수 있는 방법을 찾아 모두에게 소개하려고 한다.

먼저 예시를 위해 div 태그를 하나 생성 후 Button을 이용해 클릭 했을 시 Textarea를 생성하기 위해 기본적인 Dom을 생성한다.

그 다음 생성할 Textarea를 객체로 선언을 해 주고 Div안에 prepend 함수를 통해 div에 textarea를 넣어주는 클릭 이벤트를 생성한다.

마지막으로 생성된 textarea의 따라 document가 change할 때 생성된 textarea안의 scollHeight의 값을 구해 height를 생성해 주는 식이다.

이렇게 하면 동적으로 생성된 textarea 안의 컨텐츠(텍스트)의 높이의 따른 자동 높이가 설정 된다. 

혹시 개발 환경의 따른 폰트나 고정된 Textarea의 CSS가 있어 높이 값이 잘 맞지 않는다면 (this.scrollHeight) + n(숫자) + 'px' 부분을 수정하면서 높이를 조절하는 것이 가능하다.