[jQuery] textarea 크기 자동으로 늘리는 방법

 

 

 

 

textarea를 사용하다 보면 textarea 공간은 작은데 글을 쓰면 옆에 스크롤이 생기고 내가 손수 크기를 키워주려니 너무 귀찮고,

불편하고 "내가 글을 작성한 만큼 textarea 크기가 자동으로 커지면 안 되나?"라는 생각 한 번쯤 해보셨다면 잘 찾아오셨습니다.

 

이번 포스팅으로 textarea에 입력된 글만큼 자동으로 크기가 조절되는 방법을 알아보겠습니다.

 

 

반응형

 

 

---

 

자동으로 늘어나는 textarea 만들기

 

 

<textarea id="test_box" style="width:200px; height:100px;"></textarea>

 

 

먼저 html로 textarea를 간단하게 하나 만들어 줍니다.

 

 

텍스트에리어

 

 

현재 textarea박스는 기본으로 제공하는 박스로 글을 작성하면 위의 이미지와 같이 스크롤바가 생성되고,

이전 작성 내용들은 보이지 않게 위로 올라가게 됩니다.

 

이제 자동으로 textarea의 크기를 늘려줄 함수를 작성합니다.

 

<textarea id="test_box" style="width:200px; height:100px;" onkeyup="resize(this)" onkeydown="resize(this)"></textarea>

function resize(obj) {
	if(obj.style.height == "0px" || obj.scrollHeight == 0) {
		obj.style.height = "100px";
	} else {
		obj.style.height = 'auto';
		obj.style.height = obj.scrollHeight + 'px';
	}
}

 

 

 

728x90

 

 

resize라는 함수를 만들어 주었습니다.

textarea에서 onkeyup과 onkeydown을 추가해주어 값이 입력될 때마다 resize 함수를 실행시키게 하였습니다.

resize함수에서는 textarea의 높이값을 조절해 줍니다.

 

show()나 hide()을 사용하여 textarea를 보여주고 사라지게 하는 경우 등 다양한 이유로 스크롤높이가 0이 되는 경우가 많습니다. 이를 대비해서 스크롤 높이가 0일 때는 기본적인 textarea 높이를 설정해 줍니다.

 

 

줄바꿈을 할때마다 늘어나는 textarea

 

 

위와 같이 작성하고 동작시키면 문제없이 입력한 값에 따라서 textarea의 높이가 자동으로 늘어나는 것을 확인할 수 있습니다.

 

 

응용

 

 

그럼 조금 더 응용해서 직접 textarea에 내용을 입력하는 것이 아니라,

jQuery를 사용해서 textarea의 value를 변경시킨다면 위의 코드는 잘 동작할까요?

 

 

<textarea id="test_box" style="width:200px; height:100px;" onkeyup="resize(this)" onkeydown="resize(this)"></textarea>
<input type="button" value="내용입력!" id="input_text">

 

 

function resize(obj) {
	if(obj.style.height == "0px" || obj.scrollHeight == 0) {
		obj.style.height = "100px";
	} else {
		obj.style.height = 'auto';
		obj.style.height = obj.scrollHeight + 'px';
	}
}

$(document).ready(function() {
	$("#input_text").click(function() {
    	$("#test_box").val("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa");
  	});
});

 

 

간단하게 "내용입력!"이라는 버튼을 하나 생성해 주고, 해당 버튼을 눌렀을 때 긴 텍스트를 textarea에 넣어주도록 해보겠습니다.

 

 

버튼을 눌러서 textarea에 값 입력

 

 

버튼을 누르면 위의 이미지와 같이 값은 들어갔지만 textarea의 크기는 변함없고, 스크롤만 생긴 것을 확인할 수 있습니다.

즉 resize 함수가 동작하지 않았다는 것을 의미합니다.

 

resize함수는 textarea에서 키보드를 누르거나 떼었을 때 동작하도록만 되어있기 때문에,

버튼을 눌러 값을 넣어준 경우는 동작하지 않는 것을 확인할 수 있습니다.

 

그렇다면 이런 경우는 어떻게 해서 함수를 동작시킬 수 있을까요?

저는 textarea의 값 변경감지나, onchange나 여러 가지 생각을 해봤는데 결론적으론 onchange는 동작하지 않습니다.

 

여러가지 방법이 있을 수 있는데, 제가 생각하기에 가장 간단한 방법을 알려드리겠습니다.

 

제가 사용한 방법은 바로 trigger()를 활용하는 것입니다.

 

 

$("#test_box").val("텍스트 간소화..").trigger("keyup");

 

 

위의 코드와 같이 textarea의 value값을 변경해 줄 때 뒤에 trigger("keyup")을 붙여줌으로 해결 가능합니다.

 

trigger를 사용하면 "textarea에 value값을 변경해 줄 때 keyup을 발동해라"라는 뜻으로,

이전 keyup에 resize 함수를 동작하게 구현해 두었기 때문에 trigger를 통해서 바로 resize 함수를 작동시킬 수 있습니다.

 

 

textarea 크기 자동조절

 

 

 

위와 같이 잘 동작하는 것을 확인할 수 있습니다.

 

---

 

결론

 

이 포스팅에서는 textarea의 크기를 자동으로 변경해 주는 resize() 함수를 작성해 보았습니다.

이전에 배웠던 여러 함수들을 응용하여 같이 사용했을 때 더 다양한 기능을 추가할 수 있는 것을 확인할 수 있었습니다.

 

텍스트를 입력할 때 resize() 함수를 사용하여 사용자가 부담 없이 텍스트를 길게 작성할 수 있도록 해보세요.