CSS만으로 텍스트 영역 높이를 동적으로 조정할 수 있습니까?

CSS를 사용한 동적 텍스트 영역 높이

사용자 입력을 위한 텍스트 영역을 생성할 때 크기에 맞게 확장하거나 축소하는 것이 바람직한 경우가 많습니다. 내용의. JavaScript 또는 PHP와 관련된 솔루션이 존재하지만 순수한 CSS 기반 방법이 있습니까?

해결책:

예, CSS를 사용하여 동적 텍스트 영역을 구현할 수 있습니다. 키. 방법은 다음과 같습니다.

1. 초기 높이를 자동으로 설정: 필요에 따라 텍스트 영역을 늘리거나 줄이려면 초기 높이를 "자동"으로 설정:

textarea {
  height: auto;
}

2. 'oninput' 이벤트 사용: 텍스트 영역의 높이를 동적으로 조정하려면 'oninput' 이벤트 핸들러를 여기에 연결하세요:

<textarea oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>

3. 높이 먼저 재설정: 콘텐츠에 따라 높이를 설정하기 전에 먼저 빈 문자열로 재설정하세요. 이렇게 하면 텍스트 영역이 축소되거나 확장될 수 있습니다.
4. 실제 높이 계산: 스크롤된 내용을 기반으로 텍스트 영역의 실제 높이를 결정하고 'height' 속성에 픽셀로 추가합니다. .

이러한 단계를 구현하면 JavaScript나 PHP를 사용하지 않고도 콘텐츠에 맞게 높이를 자동으로 조정하는 텍스트 영역을 만들 수 있습니다.

위 내용은 CSS만으로 텍스트 영역 높이를 동적으로 조정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!