스크롤바 없이 동적 텍스트 영역 높이 조정을 구현하는 방법은 무엇입니까?

텍스트 영역 자동 높이 재검토

질문:

많은 개발자가 조정이 필요하다고 느꼈습니다. 텍스트 영역의 높이를 동적으로 그 안에 있는 내용에 맞춥니다. 이는 사용자 경험을 향상시킬 뿐만 아니라 불필요한 스크롤바도 제거합니다.

해결책:

이를 달성하는 한 가지 접근 방식은 Pure JavaScript를 사용하는 것입니다. 다음은 텍스트 영역의 높이를 효과적으로 조정하는 코드 조각입니다.

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

이 코드에서

• 요소는 조정하려는 텍스트 영역입니다.
• 정확한 계산을 위해 초기 높이는 작은 값(5px)으로 설정됩니다.
• scrollHeight 속성은 숨겨진 오버플로를 포함하여 텍스트 영역 내용의 높이를 반환합니다.
• 높이를 스크롤 높이는 콘텐츠에 맞게 동적으로 조정됩니다.

CSS 및 HTML에서 이 기능을 구현하려면:

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

<code class="html"><textarea oninput="auto_grow(this)"></textarea></code>

• resize: none; 사용자가 텍스트 영역의 크기를 조정하는 것을 방지합니다.
• overflow: hide; 설정된 높이를 초과하는 초과 콘텐츠를 숨깁니다.
• min-height 및 max-height는 최소 및 최대 높이 제한을 정의합니다.
• oninput 이벤트는 텍스트 영역의 입력이 변경될 때마다 auto_grow 함수를 트리거합니다. .

이 솔루션은 텍스트 영역의 높이가 포함된 콘텐츠와 일치하도록 보장하여 스크롤 막대 없이 향상된 사용자 경험을 제공합니다.

위 내용은 스크롤바 없이 동적 텍스트 영역 높이 조정을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!