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

Create a textarea and the task is to automatically resize it when we type or paste the content in it. It can be achieved by using JavaScript and jQuery.

Method 1: Using JavaScript: To change the height, a new function is created which changes the style property of the textarea. The height of the textarea is first set to auto. This value makes the browser set the height of an element automatically. This will make the text scrollable as the textarea height is lesser than the text. Immediately on the next line, the height is again set equal to that of the scrollHeight.

The scrollHeight property is used to return the entire height of an element including padding in pixels. This will make the textarea height equal to the height of the whole text area, effectively resizing the textarea to fit the text.



The ‘input’ event is fired whenever the value of an input or textarea changes. This event can be detected using the addEventListener() method. The callback function of this method is set to the new function created above. This will trigger the textarea to resize whenever any text input is detected, therefore automatically resizing according to the text being typed or pasted.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<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>

chevron_right


Output:

  • Before writing any text:
    js-input-before
  • Before writing the text:
    js-input-after

Method 2: Using jQuery: It is similar to the above used method. The on() method in jQuery is used to attach an event handler to any element. The textarea is first selected and this method is used to apply an event handler on the selected element.
A new function is declared in the callback which changes the style property of the textarea. The height of the textarea is first set to ‘auto’ and then immediately on the next line, the height is again set equal to that of the scrollHeight.

This will make the textarea’s height equal to the height of the whole text area, effectively resizing the textarea to fit the text. This function would be executed whenever a change in input is detected and the textarea would appear to resize automatically.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to create auto-resize textarea
        using JavaScript/jQuery?
    </title>
      
    <script src=
    </script>
      
    <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">
        $('#autoresizing').on('input', function () {
            this.style.height = 'auto';
              
            this.style.height = 
                    (this.scrollHeight) + 'px';
        });
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before writing any text:
    jq-input-before
  • After writing the text:
    jq-input-after


My Personal Notes arrow_drop_up

Maybe this silence is dangerous

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.