How to Auto Resize TextArea to Fit Text

Web developers often employ TextArea to accept multiline text input from users. But sometimes the user input is so big that it goes beyond the allotted size of TextArea. In such cases, you can auto resize TextArea to Fit Text. In this article, we will learn how to do this using JavaScript.

How to Auto Resize TextArea to Fit Text

There are two ways to auto resize TextArea to Fit Text – using JavaScript and using jQuery. We will look at both these approaches. Let us say you have the following TextArea with input text.

<textarea >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>

1. Using JavaScript

Just add the following JavaScript code to auto resize TextArea.

const tx = document.getElementsByTagName("textarea");
for (let i = 0; i < tx.length; i++) {
  tx[i].setAttribute("style", "height:" + (tx[i].scrollHeight) + "px;overflow-y:hidden;");
  tx[i].addEventListener("input", OnInput, false);
}

function resize_area() {
  this.style.height = 0;
  this.style.height = (this.scrollHeight) + "px";
}

The above code works for all TextArea tags. First we get a list of all text areas by tag using getElementsByTagName() function. Next, we loop through these text areas one by one, setting its height to its scrollHeight, that is, the height covered by its existing text. We also add event listener resize_area() to each text area, which also does the same thing, but is triggered when input is entered in the text area.

Now when the page loads, the JS code will loop through each text area on the page and auto resize it based on its contents. Each text area also has an event handler that gets triggered on user input.

2. Using jQuery

You can also use third party JS libraries like jQuery to do the same thing.

$("textarea").each(function () {
  this.setAttribute("style", "height:" + (this.scrollHeight) + "px;overflow-y:hidden;");
}).on("input", function () {
  this.style.height = 0;
  this.style.height = (this.scrollHeight) + "px";
});

Here too we set an event handler to each text area that basically resizes it by setting its height to scrollHeight value. It also attaches an event handler to each text area which also does the same thing. Please make sure to include jQuery file on your page, along with the above code.

In this article, we have learnt how to auto resize text area based on its contents, using JavaScript. You can use it to make your websites and applications more user friendly. It is useful for users who need to enter large texts as input, as they will not need to scroll a lot, due to the auto resize feature of text area.

How to Auto Resize TextArea to Fit Text