순수 JavaScript로 텍스트 영역의 크기를 자동으로 조정하는 방법은 무엇입니까?

텍스트 영역 자동 높이

이 질문의 목적은 텍스트 영역의 스크롤 막대를 제거하고 그 안의 콘텐츠에 맞게 높이를 조정하는 것입니다. 순수 JavaScript 코드를 사용하는 솔루션이 제공됩니다.

<code class="js">function auto_grow(element) {
  element.style.height = "5px";
  element.style.height = (element.scrollHeight) + "px";
}</code>

텍스트가 입력될 때 텍스트 영역의 높이가 동적으로 조정되도록 하기 위해 이 함수는 oninput 이벤트에 의해 트리거됩니다. 또한 텍스트 영역의 CSS 속성을 조정하여 크기 조정 및 오버플로를 비활성화하고 원하는 경우 최소 및 최대 높이를 설정할 수 있습니다.

<code class="css">textarea {
  resize: none;
  overflow: hidden;
  min-height: 50px;
  max-height: 100px;
}</code>

이러한 조정을 구현하면 텍스트 영역의 높이가 콘텐츠에 맞게 자동으로 조정됩니다. 매끄럽고 반응성이 뛰어난 사용자 경험을 보장하면서 스크롤바가 필요하지 않습니다.

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