Auto Resize Textarea Using Vanilla JavaScript (Free Code)

In this tutorial, you will learn how to create Auto Resize Textarea using JavaScript. Texteria we use in many places. However, we need to auto resize it in many places.

So in this tutorial, I will discuss with you how to automatically resize Textarea using Vanilla JavaScript. I have already shown you how to make react auto-resize Textarea.

In the case of auto-resizing textarea, the height of the textarea depends on the amount of content. That means the height will be less under normal conditions. The more text is added, the larger the size of the HTML Textarea.

Auto Resize Textarea

JavaScript auto-resize textarea has many advantages. Scrollbars are available for general Textarea. However, there will be no scroll.

This design is very easy to make. One line of HTML, some CSS, and a little Vanilla javascript are used here. Earlier I shared a design of Textarea auto-resize bootstrap.

See the Pen Untitled by Shantanu Jana (@shantanu-jana) on CodePen.

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

The JavaScript I used here is quite simple. If you know basic JavaScript, you can easily create this JavaScript Auto Resize Textarea.

How to Auto Resize Textarea using JavaScript

Now if you want to create this simple HTML Auto Resize Textarea then follow the tutorial below. Here I have given all the codes and explanations of how those codes work.

Step 1: Basic structure of textarea

I first created Textarea on the webpage using the HTML code below.

<textarea></textarea>

Step 2: Design Auto Resize Textarea

Now it's time to design Auto Resize Textarea using a little CSS. As you can see, we have set a minimum width and minimum height for this text area. I have added a background color and a border with it.

body{

  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.

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. I have already shared many tutorials on Textarea such as Character Counter, Validation, etc. Please comment on how you like this JavaScript Auto Resize Textarea.

The download will start automatically

 ALL Credit of this post going to https://www.foolishdeveloper.com