Auto Resize Textarea Height to Fit Content Using JavaScript

Auto Resize Textarea Height is the best feature to fit the large content. This feature can create a user-friendly & attractive Textarea Field. It can increase or decrease the height of the Textarea field automatically based on the length of content.

You can also easily implement this feature with another text field. So, you will learn here the general code to use with any type of text field. It will be able to expand the height of the text field automatically whenever you enter or paste the content into it.

auto resize textarea height using javascript

 How to Create Auto Resize Textarea Using JavaScript

As you know that Textarea Field has the default behavior. Whenever you enter the largest length of content, a scrollbar will appear in its vertical direction. Even It does not increase or decrease its own height automatically. So, it does not look attractive & userfriendly.

But you should always create a user-friendly Textarea field that would be easy to use. So, I have shared the best javascript code to create it. This script is very simple to learn & integrate into the project.

This script will also help you to create an auto-resize feature for a single & multiple Textarea filed. Even It can hide the default scrollbar of a Textarea field.

  • You have to add the following CSS code to expand Textarea properly.
.auto-resize, #autoResize{
   height:45px;
   display: block; 
   overflow: hidden; 
   resize: none;
}
textarea:focus{
  outline:none
}

  • You have to also use the Event Listener method to and scrollHeight property in javascript code. So, know about it through the following points.

Whenever you type or paste something in the text Feild, the input event will be fired. So, this event will be accessed using the addEventListner method. Even this method will execute the custom callback function autoResizeHeight. This callback function contains the statements to resize the Textarea height automatically.

The scrollHeight property calculates the entire height of the HTML element with its default padding in the px unit. So, It will make the Textarea height equal to the entire height of the whole content of Textarea.

Auto Resize Single Textarea

  • Create a single Textarea Field using HTML.
<textarea id="autoResize" placeholder="Enter Text Here...">
</textarea>
  • Create an auto-resize feature to a single Textarea field using javascript.
var inputField = document.getElementById('autoResize');
inputField.addEventListener('input',autoResizeHeight,0);

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

Auto Resize Multiple Textarea

Create multiple Textarea field using HTML Here, I have created three Textarea fields. you can create more.

<textarea class="auto-resize"  placeholder="Enter Text Here...">
</textarea>
<textarea class="auto-resize"  placeholder="Enter Text Here...">
</textarea>
<textarea class="auto-resize"  placeholder="Enter Text Here...">
</textarea>

Create an auto-resize feature to the multiple Textarea field using javascript.

var multipleFields=document.querySelectorAll('.auto-resize');
for(var i=0; i<multipleFields.length; i++){
multipleFields[i].addEventListener('input',autoResizeHeight,0);
}
function autoResizeHeight(){
  this.style.height="auto";
  this.style.height= this.scrollHeight+"px";
  this.style.borderColor="green";
}

 

Get the Complete Source Code

You can use the following complete source code in your project. It contains HTML, CSS, & javascript code.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
body{
background: #eeeded;}
textarea{
width:100%;}
.auto-resize, #autoResize{
   height:45px;
  display: block; 
  overflow: hidden; 
  resize: none;
  border-left:0px;
  border-right:0px;
  border-top:0px;
  margin-bottom:50px;
  width:100%;
  padding:15px;
  padding-bottom:0px}
  textarea:focus{
  outline:none}
  .textarea-container{
  width:50%;
  position:relative;
  left:100px;}
   .textarea-container h3{
   color:blue}
</style>
</head>
<body>
<div class="textarea-container">
<h3>Default Textarea</h3>
<textarea placeholder="Enter Text Here...">
</textarea>

<h3>Auto Resize Single Textarea</h3>
<textarea id="autoResize" placeholder="Enter Text Here...">
</textarea>

<h3>Auto Resize Multiple Textarea </h3>

<textarea class="auto-resize"  placeholder="Enter Text Here...">
</textarea>
<textarea class="auto-resize"  placeholder="Enter Text Here...">
</textarea>
<textarea class="auto-resize"  placeholder="Enter Text Here...">
</textarea>

</div>
<script>
// auto resize single textarea 
var inputField = document.getElementById('autoResize');
inputField.addEventListener('input',autoResizeHeight,0);

var multipleFields=document.querySelectorAll('.auto-resize');
for(var i=0; i<multipleFields.length; i++){
multipleFields[i].addEventListener('input',autoResizeHeight,0);
}

// auto resize multiple textarea
function autoResizeHeight(){
  this.style.height="auto";
  this.style.height= this.scrollHeight+"px";
  this.style.borderColor="green";
}
</script>

</body>
</html>

 

Recommended Topics

How to Count Textarea Characters Using JavaScript

JavaScript Interview Questions and Answers

 

Suggestion

I hope you have learned the above script. If you have any questions, you can ask me through the below comment box. Even you can suggest topics related to web technology.

I will share more tutorials with the best concept & Standard coding. So, you should continue to visit my blog. Even share it with your friends.

Leave a Comment