찾다

집 >웹 프론트엔드 >CSS 튜토리얼 >JavaScript에서 자체 조정 텍스트 영역을 어떻게 만들 수 있나요?

JavaScript에서 자체 조정 텍스트 영역을 어떻게 만들 수 있나요?

Patricia Arquette
Patricia Arquette원래의
2024-12-15 06:30:11417검색

How Can I Create Self-Adjusting Textareas in JavaScript?

자동 높이 텍스트 영역

텍스트 영역으로 작업할 때 흔히 발생하는 문제 중 하나는 텍스트 영역을 사용하지 않고도 사용자의 입력을 수용할 수 있도록 높이를 조정하는 것입니다. 스크롤바. 이러한 우려는 텍스트 영역의 콘텐츠 길이가 종종 달라지는 시나리오에서 발생합니다. 순수 JavaScript를 사용하여 이를 달성할 수 있는 방법은 다음과 같습니다.

제공된 코드 조각은 콘텐츠에 따라 텍스트 영역의 높이를 동적으로 조정하는 auto_grow라는 JavaScript 함수를 활용합니다.

function auto_grow(element) {
  element.style.height = "5px";
  element.style.height = (element.scrollHeight) + "px";
}

CSS에서, 다음 스타일을 정의하여 스크롤 막대를 제거하고 최소 및 최대 높이를 설정할 수 있습니다.

textarea {
  resize: none;
  overflow: hidden;
  min-height: 50px;
  max-height: 100px;
}

이 기능을 구현하려면