JavaScript와 CSS를 사용하여 자체 조정 텍스트 영역 높이를 만드는 방법은 무엇입니까?

Textarea 자동 높이

Textarea 요소의 경우 높이를 관리하는 것은 사용자 경험을 향상하고 미적 요소를 유지하는 데 중요할 수 있습니다. 웹 애플리케이션. 때로는 포함된 텍스트의 양에 따라 텍스트 영역 높이가 자동으로 조정되기를 원할 수도 있습니다.

이를 달성하기 위한 효과적인 솔루션 중 하나는 JavaScript와 CSS를 사용하는 것입니다. 이를 구현하기 위한 단계별 가이드는 다음과 같습니다.

JavaScript:

1. 텍스트 영역의 값을 계산하고 업데이트하는 JavaScript 함수를 만듭니다. height:

function auto_grow(element) {
  // Set the initial height to a small value (e.g., 5px)
  element.style.height = "5px";

  // Calculate the new height based on the scrollHeight property
  element.style.height = (element.scrollHeight) + "px";
}

CSS:

2. 세로 스크롤을 방지하고 최소한으로 설정하도록 텍스트 영역 스타일을 지정합니다. 차원:

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

HTML:

3. 텍스트 영역 내용이 변경될 때 auto_grow 함수를 호출하는 이벤트 리스너를 추가합니다.

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

이 솔루션을 구현하면 텍스트 영역의 높이가 자동으로 조정됩니다. 텍스트를 입력하거나 삭제할 때마다 역동적이고 편리한 사용자 경험을 제공합니다.

위 내용은 JavaScript와 CSS를 사용하여 자체 조정 텍스트 영역 높이를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!