How to Create Auto Resize Textarea Using JavaScript

by

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

Auto Resize Textarea Height to Fit Content Using JavaScript

As you know the 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 & user-friendly.

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 field. Even It can hide the default scrollbar of a Textarea field.

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

Whenever you type or paste something in the text field, the 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.

Learn Also –

How to Count Textarea Characters Using JavaScript

JavaScript Interview Questions and Answers

Auto Resizable Textarea Height with Javascript

Now, to resize the Textarea auto height based on content, you will have to configure the following steps.

  • First of all, create an HTML Textarea with  id="auto-resize"
  • Set overflow to hidden and resize to none using CSS to expand Textarea properly.
  • Now, start to write javascript code –
  •  Access Textarea input with the class .auto-resize
  • Apply for loop to work well for one or more Textarea
  • Create a custom function autoResizeHeight() and set the height to auto.

File Name –

<!DOCTYPE html>
<html>
<head>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<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>


<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>


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>

 

You can easily implement this code for any kind of Textarea in your project. If you face any problem with it, you should read again this tutorial and check the execution of javascript code in your browser console.

 

My 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.