반응형
1. 키보드 입력에 따른 textarea 크기 자동 조절
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <style> textarea { box-sizing: border-box; resize: none; } </style> </head> <body> <textarea class="autoresize" data-autoresize rows="2"></textarea> <script> $.each($('.autoresize'), function() { var offset = this.offsetHeight - this.clientHeight; var resizeTextarea = function(el) { $(el).css('height', 'auto').css('height', el.scrollHeight + offset); }; $(this).on('keyup input', function() { resizeTextarea(this); }).removeAttr('data-autoresize'); }); </script> </body> </html> | cs |
2. 키보드 입력 없이 textarea 크기 자동 조절
프로그래밍에 의해서 textarea에 텍스트가 삽입될 때는 키보드 이벤트가 먹히지 않으므로
setTimeout 함수를 사용해서 시간이 지날 때마다 resizing 해야한다.
1 2 3 4 5 6 7 8 9 10 11 | <textarea rows="5" cols="50" id="textar" ></textarea><br /><br /> function resize(obj) { obj.style.height = "0px"; obj.style.height = (12+obj.scrollHeight)+"px"; } // 페이지 열리고 특정 시간 뒤에 한 번만 실행 $(document).ready(function () { setTimeout(function() { resize($("#textar")[0]); },1000); }); // 0.1초마다 계속 resize //var timerId = setInterval(() => resize($("#textar")[0]),100); | cs |
반응형
'프로그래밍 > 웹' 카테고리의 다른 글
| 이클립스 설치 및 톰캣 연동 (1) | 2020.11.14 |
|---|---|
| 웹 크롤링 환경 구축 및 예제 (0) | 2020.07.23 |
| PHP 자주쓰는 함수 모음 (0) | 2019.12.27 |
| 자바스크립트 이미지 캡처하기 (0) | 2019.12.13 |
| PHP 이미지 캡처하기 (0) | 2019.12.13 |
