How to Make Auto Resize Text Area Using Java Script Perfec2 Tech

Auto Resize Textarea using JavaScript

Auto Resize Textarea using JavaScript.

In this post, you will learn how to create auto resize Textarea using JavaScript. We Use Textarea in Many Places. However, We need to auto resize it in many Places.

So in This post, I will teach you How to Make Auto Resize Text Area Using Java Script?

The height of the Textarea depends on the amount of Content. This means that under normal conditions the altitude will be lower. As more text is added, the size of the HTML text area will increase.

Auto Resize Textarea Project:

                                                                              

JavaScript's automatic text area resizing has many benefits. Scroll bars are available for the general text area. However, there will be no postponement.

This design is very easy to make. One line of HTML, some CSS, and a little Vanilla Javascript are used here.

---

As you can see above, this is a simple project where the texture will change size depending on the amount of content.

The JavaScript I used here is pretty basic. If you have basic knowledge of JavaScript, you can easily create this auto-sizing text area in JavaScript.

How to Make Auto Resize Text Area Using Java Script?

Now, if you want to create this simple auto-resize HTML text area, follow the guide below. Here I have given all the codes and explained how these codes work.

Step 1: Structure of Textarea:

First, create a Textarea at the website by the use of the HTML code below.

Html

    
<textarea></textarea>
    

Step 2: Design Auto Resize Textarea:

Now it's time to style the auto-sizing text area with some CSS. As you can see, we have set a minimum width and  height for this text box. I added a background color and a border with it.

Css

 background-color: rgb(45, 138, 192);
}

textarea{
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 min-height: 150px;
 min-width: 400px;
 border: 6px solid rgb(212, 212, 212);
 font-family: sans-serif;
 font-size: 17px;
}

Step 3: Auto Resize Textarea's JavaScript:

Now is the time to activate it, that is, to arrange how this Textarea will determine its own size. I have tried to explain as much as possible, hopefully, you will not have difficulty in understanding.

JS

var comfyText = (function(){ //A constant of textarea has been determined var tag = document.querySelectorAll('textarea') //When the length of the textarea is greater than 'i' for (var i=0; i<tag.length; i++){ // for Copy paste tag[i].addEventListener('paste',autoExpand) //for input tag[i].addEventListener('input',autoExpand) tag[i].addEventListener('keyup',autoExpand) } //How Auto Expand is determined function autoExpand(e,el){ var el = el || e.target el.style.height = 'inherit' el.style.height = el.scrollHeight+'px' } window.addEventListener('load',expandAll) window.addEventListener('resize',expandAll) function expandAll(){ var tag = document.querySelectorAll('textarea') for (var i=0; i<tag.length; i++){ autoExpand(e,tag[i]) } } })()

Hopefully, you have been able to create Auto Resize Textarea using the above code.