Computer >> 컴퓨터 >  >> 프로그램 작성 >> JavaScript

CSS에서 JavaScript를 사용하여 텍스트 영역 자동 확장

<시간/>

JavaScript를 사용하여 Textarea 요소가 콘텐츠와 함께 자동으로 커지도록 설정할 수 있습니다.

다음 예는 위의 시나리오를 달성하는 방법을 보여줍니다.

예시

<!DOCTYPE html>
<html>
<head>
<style>
* {
   margin: 3%;
   color: navy;
   font-size: 1.2em;
}
#ta {
   padding: 2%;
   resize: none;
   width: 330px;
   min-height: 80px;
   overflow: hidden;
   box-sizing: border-box;
}
</style>
</head>
<body>
<form>
<label for="ta">Cool TextArea</label>
<textarea id="ta"></textarea>
</form>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$("#ta").on('input', function() {
   var scroll_height = $("#ta").get(0).scrollHeight;
   $("#ta").css('height', scroll_height + 'px');
});
</script>
</body>
</html>

출력

이것은 다음 결과를 생성합니다 -

CSS에서 JavaScript를 사용하여 텍스트 영역 자동 확장

CSS에서 JavaScript를 사용하여 텍스트 영역 자동 확장

예시

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 3%;
   overflow-y: scroll;
}
#ta {
   padding: 2%;
   resize: none;
   width: 333px;
   min-height: 90px;
   overflow: hidden;
   box-sizing: border-box;
   font-size: 1.5em;
}
</style>
</head>
<body>
<div>
<textarea id="ta"></textarea>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$("#ta").on('input', function() {
   var scroll_height = $("#ta").get(0).scrollHeight;
   $("#ta").css('height', scroll_height + 'px');
});
</script>
</body>
</html>

출력

이것은 다음 결과를 생성합니다 -

CSS에서 JavaScript를 사용하여 텍스트 영역 자동 확장