모바일 브라우저에서 글 내용에 따라 자동으로 늘어나는 textarea 만들기

textarea의 크기보다 더 많은 내용의 글을 작성할 경우 textarea의 크기는 유지된 채로 내부에 스크롤바가 생기게 됩니다. 그런데 이와 같이 하지 않고 사용자가 입력한 글의 내용만큼 textarea 의 높이가 늘어나서 스크롤바가 생기지 않게 하고 싶은 경우가 있습니다. 그럴 때는 textarea에 글자가 입력될 때마다 textarea의 clientHeight와 scrollHeight를 비교해서 scrollHeight가 더 큰경우(textarea의 크기보다 글 내용이 더 커지는 경우입니다.) clientHeight의 크기를 늘려주는 방법을 사용하게 됩니다.

이와같은 원리를 사용하여 jQueryMobile 같은 경우에는 아래와 같은 코드로 이 기능을 처리하고 있습니다.

// 아래는 jQueryMobile의 소스코드 중 일부입니다.
var extraLineHeight = 15,
	keyupTimeoutBuffer = 100,
	keyup = function() {
		var scrollHeight = input[ 0 ].scrollHeight,
			clientHeight = input[ 0 ].clientHeight;

		if ( clientHeight < scrollHeight ) {
			input.css({
				height: (scrollHeight + extraLineHeight)
			});
		}
	},
	keyupTimeout;

input.keyup(function() {
	clearTimeout( keyupTimeout );
	keyupTimeout = setTimeout( keyup, keyupTimeoutBuffer );
});

위 코드에서 input이 textarea를 가리키고 있는데, 여기에 keyup 이벤트가 발생할 때마다 높이를 검사하고, 필요할 경우 늘려주는 형태입니다.

잘 작동하는 코드이지만 한글의 경우 제대로 처리가 되지 않는 문제가 있습니다. 안드로이드폰에 내장되어 있는 모바일 브라우저는 한글을 입력하는 경우에 키 관련 이벤트인 keydown, keypress, keyup 이벤트가 발생하지 않습니다. 아이폰에서는 확인을 못해봤습니다. 이 현상은 모바일 브라우저 뿐 아니라 PC의 파이어폭스 브라우저에서도 발생합니다.

그래서 위의 jQueryMobile 경우처럼 keyup 이벤트를 활용하는 경우 textarea에 한글로 계속 입력하는 경우 textarea의 크기가 늘어나지 않게 됩니다. 영문을 한 글자라도 입력하면 그때는 늘어납니다. 한글을 입력할 때에는 keyup 이벤트가 발생하지 않지만 영문을 입력하는 순간 이벤트가 발생해서 높이를 조절하기 때문입니다.

그래서 한글 입력을 처리하기 위해서는 keyup 이벤트를 사용하는 대신 다른 방법을 사용해야 하는데요, 제가 찾아보다가 setInterval을 사용하는 방법을 알게되어서 혹시 모르시는 분이 있으시면 도움이 되실 까 해서 글을 올립니다. setInterval 을 사용하면 지금 말씀드리고 있는 textarea의 높이 조절 뿐 아니라 입력 글자수 제한 등에도 활용하실 수 있습니다.

원리는 다음과 같습니다. textarea에 focus를 받는 순간 setInterval로 반복적으로 계속 clientHeight와 scrollHeight를 확인하는 것입니다. 원래는 사용자가 글자를 입력했을 때만 keyup 이벤트로 확인하면 되는 것인데 한글 입력의 경우 keyup 이벤트가 발생하지 않아서 사용할 수 없으므로 어쩔 수 없이 setInterval을 사용해서 반복적으로 계속 확인하는 것입니다. 그리고 focus를 잃을 때 clearInterval을 해줍니다. 반복하는 시간간격은 임의로 정하면 되는데 저는 100밀리세컨드로 해봤습니다. 제가 만든 코드는 아래와 같습니다.

// textarea의 id가 textarea인 경우를 가정해서 #textarea 사용
(function() {

	var textarea = $('#textarea'),
	extraHeight = parseInt(textarea.css('fontSize')),
		scrollHeight, clientHeight, timer;

	textarea.focus(function() {

		timer = setInterval(function() {
			scrollHeight = textarea[0].scrollHeight;
			clientHeight = textarea[0].clientHeight;

			if (clientHeight < scrollHeight) {
				textarea.css('height', scrollHeight + extraHeight);
			}
		}, 100);

	});

	textarea.blur(function() {
		clearInterval(timer);
	});

})();

데모를 http://codefactory.kr/lab/autogrow_textarea.html 에 올려놓았습니다. 필요하신 분은 한번 확인해보세요..^^