티스토리 뷰

프로그래밍/Front end

[Front end] textarea 자동 높이 조절

Reference M1 2021. 1. 13. 17:02

 

HTML에서 textarea 태그는 기본적으로 지정된 높이에서 내용이 많아지면 스크롤이 생긴다. 또한 마우스로도 높이를 조절할 수도 있다.

하지만 때에 따라서 스크롤이 없고 높이를 가변적으로 조절해야 할 때가 있다. 이때 사용하는 방법이다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>textarea</title>
<style type="text/css">
textarea {
    resize:none;
    overflow: hidden;
}
</style>
<script type="text/javascript"  src="./jquery-3.3.1.min.js"></script>
</head>

<body>
    <textarea></textarea>
</body>

<script type="text/javascript">
    
    $('document').ready(function(){

        $('textarea').keyup(function(e) {

            $(this).css('height', 'auto');
            $(this).height(this.scrollHeight);
        });
    });
</script>
</html>

'프로그래밍 > Front end' 카테고리의 다른 글

[Front end] package-lock.json, yarn-lock.json 의미  (0) 2021.02.05
[Front end] React 절대경로 설정  (0) 2021.02.04
[Front end] JavaScript 브라우저 HTML 동작 방식과 스크립트 선언  (0) 2020.12.15
[Front end] JavaScript 공통 Ajax Call  (0) 2020.08.30
[Front end] range slider click event block  (0) 2020.08.10
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
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 28 29 30 31
글 보관함