clock  Mon - Sun 8.00 AM - 8.00 PM
fb
instagram
play store
pinterest

How to auto resize textarea using jQuery?

writter  Hariom Prajapati
Date  30 Jun 2022
Language  JQuery
How to auto resize textarea using jQuery?

How to auto resize textarea using jQuery?

In this tutorial we will see how to auto resize textarea based on content using jQuery.

In this we will use two functionalities in which first is use to decrease the size of textarea based on content and second is use to increase the size of textarea based on content.

we can resize textarea also using javascript which we explain in previous tutorial.

Let's see the example to resize height of textarea based on content usisg jQuery.

How to Make Textarea Auto Resize using jQuery?

<!DOCTYPE html>
<html>

<head>
    <title>How to auto resize textarea based on content using jQuery?</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>

<body>

    <h1>How to auto resize textarea based on content using jQuery?</h1>

    <textarea id="textareaId" style="width: 800px;"></textarea>

    <script type="text/javascript">
        $('#textareaId').on('input', function () {
            this.style.height = 'auto';

            this.style.height = (this.scrollHeight) + 'px';
        }); 
    </script>

</body>

</html>

 

Output

resize text area