JavaScript를 활용하면 textarea(텍스트 영역) 요소가 입력된 내용의 양에 맞춰 높이가 자동으로 늘어나도록 만들 수 있습니다. 이 기법을 적용하면 사용자가 긴 문장을 입력할 때도 스크롤바 없이 전체 내용을 한눈에 확인할 수 있어 입력 경험이 크게 개선됩니다.
구현 원리는 매우 간단합니다. input 이벤트가 발생할 때마다 요소의 scrollHeight, 즉 콘텐츠 전체의 실제 높이를 읽어온 뒤 그 값을 요소의 height 스타일에 그대로 적용하는 방식입니다. 아래 예제들을 통해 구체적인 구현 방법을 살펴보겠습니다.
예제 1: 기본 자동 확장 텍스트 영역
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 3%;
color: navy;
font-size: 1.2em;
}
#ta {
padding: 2%;
resize: none;
width: 330px;
min-height: 80px;
overflow: hidden;
box-sizing: border-box;
}
</style>
</head>
<body>
<form>
<label for="ta">Cool TextArea</label>
<textarea id="ta"></textarea>
</form>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$("#ta").on('input', function() {
var scroll_height = $("#ta").get(0).scrollHeight;
$("#ta").css('height', scroll_height + 'px');
});
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과를 얻을 수 있습니다 −
텍스트를 입력할 때마다 textarea의 높이가 내용에 맞춰 자연스럽게 늘어나는 것을 확인할 수 있습니다. 여기서 resize: none은 사용자의 수동 크기 조절을 막고, overflow: hidden은 스크롤바를 숨기며, box-sizing: border-box는 패딩을 포함해 정확한 높이 계산을 돕는 역할을 합니다.
예제 2: 스크롤 가능한 컨테이너 안에서의 자동 확장
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 3%;
overflow-y: scroll;
}
#ta {
padding: 2%;
resize: none;
width: 333px;
min-height: 90px;
overflow: hidden;
box-sizing: border-box;
font-size: 1.5em;
}
</style>
</head>
<body>
<div>
<textarea id="ta"></textarea>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$("#ta").on('input', function() {
var scroll_height = $("#ta").get(0).scrollHeight;
$("#ta").css('height', scroll_height + 'px');
});
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과를 얻을 수 있습니다 −
이번 예제는 textarea를 overflow-y: scroll이 적용된 div 컨테이너로 감싼 형태입니다. 텍스트 영역 자체는 내용에 따라 계속 확장되고, 컨테이너가 일정 높이를 넘으면 스크롤되는 구조입니다. 이러한 방식은 게시판 작성창이나 채팅 입력창처럼 화면 공간이 제한된 환경에서 특히 유용하게 활용할 수 있습니다.