[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>