text-area 늘리기 텍스트 박스 늘리기

텍스트 박스 사용시 (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');

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