auto resize textarea using javascript

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 will need to auto resize TextArea to Fit Text. Otherwise, the TextArea will become scrollable as soon as the height of text exceeds that of TextArea. This will spoil user experience especially if they need to enter a large piece of text and do not want to scroll a lot. There are a couple of ways to do this, using JavaScript and jQuery. 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. In both cases, we basically set the height property of TextArea to 0 or auto, to make it scrollable. Then we set it to ScrollHeight to resize it to text height. Let us say you have the following TextArea with input text.

<textarea id='my_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>

Let us learn how to auto resize it.

1. Using JavaScript

If you do not want to use any third party library then just add the following JavaScript code to auto resize TextArea. It uses plain JavaScript to get the work done. However, its syntax can be difficult to understand.

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 on a web page. First when the page loads, 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. This will make the TextArea scrollable. 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.

ScrollHeight property returns the full height of an element including its padding. This will resize TextArea to fit the text height.

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.

Similarly, you can also use getElementsByClassName() select all TextArea having a specific class name and loop through them as shown above.

On the other hand, instead of auto resizing all TextArea, if you just want to resize one TextArea, then you can use getElementById() function instead of using getElementsByTagName(). In this case, you do not need a loop since there is only one TextArea.

const tx = document.getElementByID("my_textarea");
tx.setAttribute("style", "height:" + (tx.scrollHeight) + "px;overflow-y:hidden;");
tx.addEventListener("input", OnInput, false);


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

In resize_area() function, we have set height property to 0 first before setting it to ScrollHeight. Alternatively, you can set it to auto first and then set it to ScrollHeight.

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

2. Using jQuery

You can also use third party JS libraries like jQuery to do the same thing. Its syntax is very easy to understand. Here also we use the same logic of setting the height of TextArea to 0 or auto and then setting it again to ScrollHeight.

$("textarea").each(function () {
this.attr("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. We also use on() function to attach an event handler to each text area and does the same thing. Please make sure to include jQuery file on your page, along with the above code.

We have used attr() function to set the style attribute of TextArea. You can also use css() function for this purpose.

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

If you want to resize just one TextArea, you can directly select it using its ID as shown below.

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

Of course, if you are using other third party libraries such as AngularJS, you can use the same solution of setting the TextArea height to automatically resize it.

Conclusion

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. Please remember to not only resize the height property of TextArea on page load but also add an event handler that does the same and is triggered on input event. Otherwise, the TextArea will be resized properly on page load but not afterwards when user modifies its text.

Also read:

How to Render HTML in TextArea
How to Install PuTTy on Linux
JavaScript Convert Object to String Without Quotes
How to Highlight Text Using JavaScript
How to Check File MIME Type With JavaScript

Leave a Reply

Your email address will not be published. Required fields are marked *