How to auto resize textarea using javascript?

Hariom Prajapati

30 Jun 2022

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