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;
}

이 기능을 구현하려면 사용자가 다음을 입력할 때 auto_grow 함수를 호출하는 요소:

<textarea oninput="auto_grow(this)"></textarea>

이 구현을 통해 텍스트 영역은 콘텐츠 길이에 맞게 높이를 자동으로 조정하여 스크롤바 없이도 원활한 사용자 경험을 제공합니다. .

위 내용은 JavaScript에서 자체 조정 텍스트 영역을 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!