Article Categories

Selected Reading

Creating auto-resize text area using JavaScript

Javascript Web Development Front End Technology

In this post, we are going to learn how to set up an auto-resize text area in JavaScript. This text area will be able to change its height automatically depending on the content within it. Auto-resize text in JavaScript is a helpful feature that can be used to edit multiple lines of text. The text can automatically change its height depending on the content inside it. The default behavior of textarea doesn't allow this, but we can create it by using the input event listener over it.

Let's understand how to adjust the height of the text area element dynamically with the help of some examples ?

How It Works

The auto-resize functionality works by:

Listening for the input event on the textarea
Resetting the height to auto to get accurate measurements
Setting the height to match the scrollHeight property
Preventing manual resizing with CSS resize: none

Basic Auto-Resize Implementation

In this case, we'll pick the text area using the ID and add the input event listener. When a user adjusts the text size we first set the text height to auto (default) and then adapt the text height based on the content.

<html>
<head>
   <title>Creating auto-resize text area using JavaScript</title>
   <style>
      #container {
         width: 310px;
      }

      textarea {
         width: 100%;
         resize: none;
         overflow: hidden;
         min-height: 40px;
      }
   </style>
</head>
<body>
   <h3>Auto-resize Text Area</h3>
    
   <div id="container">
      <textarea id="myTextArea" rows="1" placeholder="Enter text..."></textarea>
   </div>

   <script>
      const textArea = document.getElementById("myTextArea");

      textArea.addEventListener("input", function () {
         this.style.height = "auto";
         this.style.height = this.scrollHeight + "px";
      });
   </script>
</body>
</html>

Enhanced Version with Window Resize Support

In this example, we define a function resizeTextArea() that gets called both when the input event occurs and when the resize event occurs (when the window is resized). This maintains the correct height of the text area if the user resizes the window while typing.

<html>
<head>
   <title>Creating auto-resize text area using JavaScript</title>
   <style>
      #container {
         width: 310px;
      }

      textarea {
         width: 100%;
         resize: none;
         overflow: hidden;
         min-height: 40px;
         padding: 8px;
         border: 1px solid #ccc;
         border-radius: 4px;
      }
   </style>
</head>
<body>
   <h3>Auto-resize Text Area</h3>

   <div id="container">
      <textarea id="myTextArea" rows="1" placeholder="Enter text..."></textarea>
   </div>

   <script>
      const textArea = document.getElementById("myTextArea");

      function resizeTextArea() {
         textArea.style.height = "auto";
         textArea.style.height = textArea.scrollHeight + "px";
      }

      textArea.addEventListener("input", resizeTextArea);
      window.addEventListener("resize", resizeTextArea);
   </script>
</body>
</html>

Advanced Implementation with Maximum Height

For better user experience, you can add a maximum height limit to prevent the textarea from growing too large:

<html>
<head>
   <title>Auto-resize with Max Height</title>
   <style>
      textarea {
         width: 100%;
         resize: none;
         overflow-y: auto;
         min-height: 40px;
         max-height: 200px;
         padding: 8px;
         border: 1px solid #ccc;
      }
   </style>
</head>
<body>
   <h3>Auto-resize with Maximum Height</h3>
   
   <textarea id="textArea" placeholder="Type here... (max height: 200px)"></textarea>

   <script>
      const textArea = document.getElementById("textArea");
      const maxHeight = 200;

      textArea.addEventListener("input", function () {
         this.style.height = "auto";
         
         if (this.scrollHeight <= maxHeight) {
            this.style.height = this.scrollHeight + "px";
            this.style.overflowY = "hidden";
         } else {
            this.style.height = maxHeight + "px";
            this.style.overflowY = "auto";
         }
      });
   </script>
</body>
</html>

Key Points

Property	Purpose
`scrollHeight`	Returns the total height of content including hidden overflow
`resize: none`	Prevents manual resizing by the user
`overflow: hidden`	Hides scrollbars during auto-resize
`input` event	Triggers when user types or pastes content

Conclusion

Auto-resize textareas enhance user experience by dynamically adjusting height based on content. Use the scrollHeight property with the input event for smooth automatic resizing, and consider adding maximum height limits for better control.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next