>웹 프론트엔드 >CSS 튜토리얼 >텍스트 영역의 내용 크기를 자동으로 조정하고 스크롤 막대를 숨기려면 어떻게 해야 합니까?

텍스트 영역의 내용 크기를 자동으로 조정하고 스크롤 막대를 숨기려면 어떻게 해야 합니까?

Linda Hamilton
Linda Hamilton원래의
2024-12-13 02:48:10852검색

How Can I Make a Textarea Automatically Resize to its Content and Hide Scrollbars?

콘텐츠에 따라 텍스트 영역 높이 결정, 스크롤 막대 제거

문제:

텍스트 영역 높이에 맞게 동적으로 조정되는 텍스트 영역 높이 달성 콘텐츠를 제공하므로 필요하지 않습니다. 스크롤바.

JavaScript를 사용한 솔루션:

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

CSS 스타일 지정:

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

구현:

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

이 코드를 사용하면 텍스트 영역의 높이가 콘텐츠에 맞게 확장되거나 축소되므로 필요가 없습니다. 스크롤바용.

위 내용은 텍스트 영역의 내용 크기를 자동으로 조정하고 스크롤 막대를 숨기려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.