[Jquery] Textarea 자동 높이조절 라이브러리

 

관리자 화면에서 공지사항이나 자주묻는 질문들을 저장하고, Client 에서 보여주도록 진행하고 있습니다.

 

하지만 Textarea 는 Enter 입력까지도 잘 보이지만 Content 내용에 맞게 높이조절을 하기가 여간 쉬운일이 아니었습니다.

 

PC 화면에서 로드가 되었을때 내용의 Scroll 의 높이를 가져온뒤 그 높이만큼 Textarea 높이를 바꿔주는 방식을 많이 사용하는것 같은데

 

이게 문제가 발생되는건 브라우저 크기가 변할때에는 반응을 하지 않아 최초 로드된 높이만을 갖고 있다는것입니다.

 

 

 

 

이 단점까지 처리해주는 라이브러리를 찾을수 있었습니다.

 

내용은 아래의 주소로 이동해서 확인할 수 있습니다.

 

https://www.jacklmoore.com/autosize/

Autosize

 

 

 

다운로드 받거나 CDN 을 사용하여 script를 불러옵니다.

 

<script src="https://rawgit.com/jackmoore/autosize/master/dist/autosize.min.js"></script>

 

autosize 라는 함수를 호출하면 간단하게 자동 높이 조절이 됩니다.

// TextArea 자동 높이 설정
autosize($("textArea"));

 

 

 

기본 사이즈는 css를 통해 주면 됩니다.

 

 

 

내용을 입력하거나 저장된 데이터를 불러와도 높이가 자동으로 설정됩니다.

 

 

 

반응형 홈페이지를 만드는 분들이라면 autosize 라는 라이브러리를 추천드리겠습니다.