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

텍스트 영역 자동 높이: 종합 가이드

텍스트 영역으로 작업할 때 텍스트 내용에 따라 자동으로 높이를 조정하는 것이 바람직한 경우가 많습니다. 과도한 스크롤이나 빈 공간을 제거하세요. 이 효과를 얻기 위해 CSS와 JavaScript를 모두 사용하는 자세한 솔루션은 다음과 같습니다.

CSS 스타일링:

textarea {
  resize: none;
  overflow: hidden;
  line-height: 1.5;
  padding: 15px 15px 30px;
  max-width: 100%;
}

이 CSS는 텍스트 영역의 크기를 조정할 수 없도록 하고 텍스트 영역을 숨깁니다. 오버플로하고 적절한 줄 높이와 패딩을 설정합니다.

JavaScript 논리:

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

이 JavaScript 함수는 내용에 따라 텍스트 영역의 높이를 동적으로 조정하는 데 사용됩니다. 초기 높이를 5px로 설정한 다음 텍스트 내용의 실제 높이를 나타내는 scrollHeight 속성으로 크기를 조정합니다.

HTML 통합:

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

사용자가 입력할 때마다 auto_grow() 함수를 트리거하는 oninput 이벤트 리스너를 텍스트 영역에 연결합니다. text.

구현:

CSS 스타일, JavaScript 기능 및 HTML 통합을 결합하여 입력할 때 높이가 자동으로 조정되는 텍스트 영역을 생성하여 더 많은 사용자에게 제공 -친절하고 심미적으로 즐거운 경험.

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