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>
출력
이것은 다음 결과를 생성합니다 -
예시
<!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>
출력
이것은 다음 결과를 생성합니다 -