Textarea 컨텐츠에 따라 높이가 자동으로 조절되는 Textarea 구현

2025년 01월 12일

TheStorybook
작성자
2025.01.12.:09

높이가 컨텐츠에 따라 조절되는 textarea는 다음과 같이 구현합니다.

원리는 다음과 같습니다.

사용자가 값을 입력할 때마다 height를 ‘auto’로 설정하여 scrollHeight가 컨텐츠 높이만큼 만듭니다.
그 scrollHeight값을 height에 반영합니다.
높이가 늘어나더라도 스크롤바가 생기지 않도록 overflow를 hidden으로 설정합니다.
사용자가 수동으로 크기를 조절하지 못하게 하기 위해 resize를 none으로 설정합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Auto-resizing Textarea</title>
    <style>
      textarea {
        width: 100%;
        box-sizing: border-box;
        overflow: hidden; /* 스크롤바 숨김 */
        resize: none; /* 사용자가 수동으로 크기 조절하지 못하게 함 */
      }
    </style>
  </head>
  <body>
    <textarea
      id="autoResizeTextarea"
      rows="1"
      oninput="autoResize(this)"
    ></textarea>
    <script>
      function autoResize(textarea) {
        textarea.style.height = 'auto' // 높이를 자동으로 초기화
        textarea.style.height = textarea.scrollHeight + 'px' // 스크롤 높이에 맞게 높이 설정
      }
    </script>
  </body>
</html>

추가 css 스크롤 X,Y 축

overflow-x:hidden; overflow-y:auto;

TEXTAREA 옵션

WRAP = VIRTUAL  --화면에 맞게 자동으로 줄바꿈, 전송시는 입력대로 전송
WRAP = PHYSICAL  --화면에 맞게 자동으로 줄바꿈, 전송시는 자동 줄바꿈 전송
WRAP = OFF  --줄바꿈 없음.

저작자표시

'작업 소스들' 카테고리의 다른 글

[jQuery] 상품 상세이미지 더보기 접기펼치기 기능 구현 (코드O) (0)	2025.01.27
DIV 영역 자체에 링크 거는 방법 (0)	2025.01.12
디데이 스크립트 (0)	2022.12.05
메뉴 더보기 만들어보기 (0)	2022.07.16
색상을 랜덤으로 출력하기 (0)	2022.06.29

다음 글이 없습니다.

이전 글이 없습니다.

TEXTAREA 옵션

'작업 소스들' 카테고리의 다른 글

티스토리툴바