티스토리 뷰

IT tech Coding/javascript

자바스크립트, textarea 자동 높이 조절하는 간단한 방법

Coding Life 2025. 3. 14. 07:00
반응형

textarea 자동 높이 조절하는 간단한 방법

웹사이트를 개발하다 보면 종종 textarea의 높이를 자동으로 조절하고 싶을 때가 있습니다. 기본적으로 textarea는 한 줄 또는 몇 줄까지만 표시되고, 내용이 많아지면 스크롤이 생기죠. 하지만 사용자 경험(UX)을 고려한다면, 내용이 많아질 때 자동으로 높이가 조절되는 것이 훨씬 자연스럽습니다.

 

 

오늘은 자바스크립트를 이용해 textarea의 높이를 자동으로 조절하는 방법을 소개하겠습니다. 간단한 코드 몇 줄만으로 깔끔한 UX를 구현할 수 있습니다.

textarea 높이 자동 조절하는 코드

먼저, 아래의 코드를 HTML 파일에 추가해 보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Textarea 자동 높이 조절</title>
    <style>
        textarea {
            width: 100%;
            min-height: 50px;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 5px;
            resize: none; /* 크기 조절 비활성화 */
            overflow: hidden; /* 불필요한 스크롤바 제거 */
        }
    </style>
</head>
<body>
    <h2>Textarea 자동 높이 조절</h2>
    <textarea id="note" placeholder="내용을 입력하세요..."></textarea>
    <textarea id="aslist" placeholder="추가 메모를 입력하세요..."></textarea>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const textarea = document.getElementById("note");
            const textarea_aslist = document.getElementById("aslist");

            function adjustHeight(el) {
                el.style.height = "auto";  // 초기화하여 높이 재계산
                el.style.height = el.scrollHeight + "px"; // 내용에 맞춰 높이 조절
            }

            textarea.addEventListener("input", function() {
                adjustHeight(this);
            });
            adjustHeight(textarea); // 페이지 로드시 높이 조절

            textarea_aslist.addEventListener("input", function() {
                adjustHeight(this);
            });
            adjustHeight(textarea_aslist);
        });
    </script>
</body>
</html>

코드 설명

1. textarea 스타일 설정

  • resize: none; → 사용자가 직접 크기를 조절하지 못하도록 설정합니다.
  • overflow: hidden; → 불필요한 스크롤바가 생기지 않도록 설정합니다.
  • min-height: 50px; → 최소 높이를 설정하여 너무 작아지지 않도록 합니다.

2. 높이 자동 조절하는 JavaScript

function adjustHeight(el) {
    el.style.height = "auto"; // 높이 초기화
    el.style.height = el.scrollHeight + "px"; // 스크롤 높이에 맞춰 조절
}

이 함수는 textarea의 높이를 scrollHeight 값에 맞게 조절합니다. scrollHeight는 요소의 실제 내용 높이를 의미하므로, 자동으로 늘어나거나 줄어들도록 설정할 수 있습니다.

3. 이벤트 리스너 추가

textarea.addEventListener("input", function() {
    adjustHeight(this);
});
adjustHeight(textarea);
  • input 이벤트가 발생할 때마다 adjustHeight 함수를 호출해 높이를 조절합니다.
  • 페이지가 로드될 때 기존 내용이 있다면 높이를 바로 조절합니다.

적용 예시

이제 위 코드를 사용하면 textarea에 글을 입력할 때마다 높이가 자동으로 조절됩니다. 사용자가 편리하게 긴 내용을 입력할 수 있으며, 불필요한 스크롤이 제거되어 깔끔한 디자인을 유지할 수 있습니다.

간단한 몇 줄의 코드만 추가해도 UX가 훨씬 향상되니, textarea를 사용할 때 이 방법을 적극적으로 활용해 보세요!

반응형
저작자표시 비영리 변경금지

'IT tech Coding > javascript' 카테고리의 다른 글

input 요소를 화면에 맞게 크기를 바꾸는 기술  (0) 2025.03.11
자바스크립트, 두 입력값으로 서로 변환하는 코드 아이디어, JavaScript로 두 입력 필드 간 값 변환: 무한 루프를 방지하는 간단한 방법  (0) 2025.01.24
[자바스크립트] 입력 필드에서 숫자를 3자리마다 콤마로 포맷하고 소수점을 유지하는 완벽한 방법  (0) 2025.01.08
JavaScript로 간단한 파일 업로드와 관리 시스템 만들기  (0) 2025.01.04
JavaScript로 동적 재사용 가능한 Todo 달력 라이브러리 만들기: 클래스 기반 모듈화와 동적 ID 관리  (0) 2024.12.24
댓글