임베디드 | 라즈베리파이 | ARM | 리눅스 | Qt | 딥러닝




텍스트 박스 사용시 (text-area) 글 작성하면

우측에 스크롤바생성이 생기는데

이방법 말고 jquery를 이용하여

창 자체가 늘어나는 방법을 소개해드립니다.

이는 몇줄의 간단한 코드로 늘릴 수 있습니다.





위와같인 텍스트 박스에 글을 엔터로 계속 친다면

우측에 스크롤 바가 생성되겠죠?

하지만 

이 Jquery 를 사용한다면

부드럽게 텍스트 박스를 늘릴 수있습니다. 





이렇게 창 조절 없이 자동으로 늘어나게 됩니다.





http://www.jacklmoore.com/autosize/

다운로드 사이트입니다






텍스트 박스 늘리기 사이트의 전체 모습입니다.






ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ아래는 간단한 소스임을 알려줍니다. ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ


// Example: $(document).ready(function(){ $('textarea').autosize(); });


textarea {line-height: 1.4 !important;}


var $ta = $('textarea'); $ta.autosize(); document.body.offsetWidth; // trigger a reflow before the class is changed $ta.addClass('textarea-transition');


몇줄안되는 코드 삽입으로 구현이 가능합니다.




Comment +0