내용에 맞게 텍스트 영역 높이를 자동으로 조정하는 방법은 무엇입니까?

텍스트 영역 높이 조정

많은 개발자는 포함된 콘텐츠에 맞게 텍스트 영역 요소의 높이를 자동으로 조정해야 하는 문제에 직면합니다. 이는 불필요한 스크롤 막대를 제거하여 사용자 경험을 향상시킵니다.

이러한 요구를 해결하기 위해 JavaScript 기반 솔루션을 사용할 수 있습니다.

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

이 JavaScript 코드와 함께 CSS 스타일을 구현할 수 있습니다. 텍스트 영역의 미학을 처리합니다.

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

HTML 구현은 oninput 이벤트를 활용하여 높이 조정을 트리거합니다.

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

이 접근 방식을 사용하면 텍스트 영역이 높이에 따라 자동으로 확장되거나 축소됩니다. 입력된 텍스트의 양에 따라 스크롤 막대가 필요 없으며 원활한 사용자 경험이 보장됩니다.

위 내용은 내용에 맞게 텍스트 영역 높이를 자동으로 조정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!