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

How to auto resize textarea using javascript?

  Hariom Prajapati
  30 Jun 2022
  JavaScript
Imperial Advance Hero Image

How to auto resize textarea using javascript?

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

In this we 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.

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

How to Make Textarea Auto Resize using Javascript?

<!DOCTYPE html>
<html>

<head>
    <title>How to auto resize textarea based on content using javascript?</title>
</head>

<body>

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

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

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

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

</body>

</html>

 

Output

resize text area