clock  Mon - Sun 8.00 AM - 8.00 PM
mail  edu@teknowize.com
fb
instagram
play store
pinterest

How to auto resize textarea using jQuery?

  Hariom Prajapati
  30 Jun 2022
  JQuery
Imperial Advance Hero Image

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