textArea Auto Heigh
textarea {
resize: none;
overflow: hidden;
min-height: 50px;
max-height: 100px;
}
여기에 제공된 솔루션은 순수한 자바 스크립트를 사용하여 실제 콘텐츠를 기반으로 TextArea의 높이를 조정합니다. "auto_grow"라는 함수가 정의되어 Textarea의 높이를 처음에 "5px"로 설정합니다. 이것은 최소 높이를 보장합니다. 그 후, 그것은 텍스트의 "ScrollHeight"속성을 읽으며, 이는 콘텐츠의 높이를 나타냅니다. 그런 다음 높이 가이 값에 맞게 조정되어 TextRea의 높이를 효과적으로 동적으로 만듭니다. 이 기능을 통합하려면 다음 CSS가 권장됩니다.
이 CSS는 내장 크기 조정 핸들을 제거하고, 가시 오버 플로우를 방지하며, 최소 및 최대 높이 제한을 설정합니다.
마지막으로 자동 크기를 사용하여 다음 HTML이 사용됩니다. OnInput = "auto_grow (this)">이것은 "oninput"이벤트를 TextArea에 첨부하여 사용자가 텍스트를 입력 할 때마다 "auto_grow"기능을 트리거합니다. 결과적으로 Textarea의 높이는 콘텐츠의 길이로 동적으로 조정되어 완벽한 사용자 경험을 제공합니다.
부인 성명: 제공된 모든 리소스는 부분적으로 인터넷에서 가져온 것입니다. 귀하의 저작권이나 기타 권리 및 이익이 침해된 경우 자세한 이유를 설명하고 저작권 또는 권리 및 이익에 대한 증거를 제공한 후 이메일([email protected])로 보내주십시오. 최대한 빨리 처리해 드리겠습니다.
Copyright© 2022 湘ICP备2022001581号-3