How to Textarea Auto Resize in Javascript?

Share Me
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Now in this article i will simple demonstrates of how to make textarea auto resize by using javascript. Now i would like to share with you how to auto resize textarea to fit content by using javascript. So i’m going to show you about javascript textarea grow automatically. You will learn javascript auto expand textarea from here.Please follow bellow tutorial step of javascript autosize textarea height and try it.

If you have need to set text area auto height based on content using java script then i will help you how to auto resize height of text area in javascript in this post. I will give you few examples of auto adjust textarea height by using javascript.

So, let’s see bellow examples and try by own:

Example 1:

<!DOCTYPE html>
<html>
<head>
    <title>Javascript Auto-resize Textarea as User Types Example</title>
</head>
<body>
  
<h1>Javascript Auto-resize Textarea as User Types Example - Codingspoint.com</h1>
  
<strong>Body:</strong>
<br/>
<textarea id="body" style="width: 400px;"></textarea>
  
<script type="text/javascript">
    textarea = document.querySelector("#body"); 
    textarea.addEventListener('input', autoResize, false); 
  
    function autoResize() { 
        this.style.height = 'auto'; 
        this.style.height = this.scrollHeight + 'px'; 
    }
</script>
  
</body>
</html>

Read Also : How to Disable a Anchor Tag in HTML?

Example 2:

<!DOCTYPE html>
<html>
<head>
    <title>Textarea Auto Height Based on Content Jquery</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
  
<h1>Textarea Auto Height Based on Content Jquery Example - Codingspoint.com</h1>
  
<strong>Body:</strong>
<br/>
<textarea id="body" style="width: 400px;"></textarea>
   
<script type="text/javascript">
    $('#body').on('input', function () { 
        this.style.height = 'auto'; 
  
        this.style.height = (this.scrollHeight) + 'px'; 
    }); 
</script>
  
</body>
</html>

I hope it can help you so much.Also you can follow us on Facebook.

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →

Leave a Reply

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

4 × 2 =