How to create auto-resize textarea using JavaScript/jQuery ?

Last Updated : 18 Sep, 2024

Creating an auto-resize textarea using JavaScript or jQuery means dynamically adjusting the height of the textarea to fit its content as the user types. This enhances user experience by preventing the need for scrolling within the textarea, ensuring all content is visible.

Table of Content

Using JavaScript
Using jQuery

Method 1: Using JavaScript

Using JavaScript to create an auto-resize textarea involves adjusting the textarea’s height dynamically based on its content. This is achieved by setting the height to auto and then to its scrollHeight on the input event, ensuring it expands as the user types.

Example: In this example, we creates an auto-resizing textarea using JavaScript. The textarea dynamically adjusts its height based on the input, handling typing, cutting, and pasting actions smoothly.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>
        How to create auto-resize
        textarea using JavaScript/jQuery ?
    </title>
    <style>
        #autoresizing {
            display: block;
            overflow: hidden;
            resize: none;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>

    <b>
        Creating a textarea with
        auto-resize in JavaScript
    </b>

    <p>
        The textarea below will resize
        automatically accounting for
        cut, paste and typing text.
    </p>

    <textarea id="autoresizing">
            Try cutting, pasting
            or typing here
        </textarea>

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

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

</html>

Output:

How to create auto-resize textarea using JavaScript/jQuery ?

Method 2: Using jQuery

Using jQuery, you can create an auto-resize textarea by attaching an input event handler with the on() method. The handler sets the textarea's height to auto and then to its scrollHeight, ensuring it dynamically resizes to fit the content as you type.

Example: In this example, we creates an auto-resizing textarea using jQuery. The textarea automatically adjusts its height based on user input, including typing, cutting, and pasting, for smoother user interaction.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>
        How to create auto-resize textarea
        using JavaScript/jQuery ?
    </title>
    <style>
        #autoresizing {
            display: block;
            overflow: hidden;
            resize: none;
        }
    </style>
    <script src=
"https://code.jquery.com/jquery-3.4.1.min.js">
    </script>
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>

    <b>
        Creating a textarea with
        auto-resize in JavaScript
    </b>

    <p>
        The textarea below will resize
        automatically accounting for cut,
        paste and typing text.
    </p>

    <textarea id="autoresizing">
            Try cutting, pasting or typing here
    </textarea>

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

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

</html>

Output:

jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous for its philosophy of “Write less, do more". You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.