phpicoder Dec 14, 2021 Jquery

Hi Developer, In this tutorial we will learn textarea auto increase height using jquery, we create simple example for adjust textarea height like user enter new line and increase height in textarea

You need to textarea set content based auto height using jquery. If yes you are in the right place. And I'll give you two examples of automating texture height using jquery.

So look at the example below

Example 1
<!DOCTYPE html>
<html>
<head>
    <title>Textarea Auto Increase Height  - phpicoder.com</title>
</head>
<body>

<h1>Textarea Auto Increase Height  - phpicoder.com</h1>
</br>
<textarea id="body" style="width: 400px;"></textarea>

<script type="text/javascript">
    textarea = document.querySelector("#body"); 
    textarea.addEventListener('input', autoResize, false); 

    function autoResize() { 
        this.style.height = 'auto'; 
        this.style.height = this.scrollHeight + 'px'; 
    }
</script>
</body>
</html>
Example 2
<!DOCTYPE html>
<html>
<head>
    <title>Textarea Auto Increase Height  - phpicoder.com</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>

<h1>Textarea Auto Increase Height  - phpicoder.com</h1>
</br>
<textarea id="body" style="width: 400px;"></textarea>
<script type="text/javascript">
    $('#body').on('input', function () { 
        this.style.height = 'auto'; 

        this.style.height = (this.scrollHeight) + 'px'; 

    }); 
</script>
</body>
</html>

I hope it can help you...