Published - | Updated - April 9, 2021 07:02 am
174 Views
In this article, we will show you Auto Resize Textarea using Javascript and Jquery. This article will give you simple example of Auto Resize Textarea using Javascript and Jquery. you will learn Auto Resize Textarea using Javascript and Jquery.
Step 1 :- Javascript
<!DOCTYPE html>
<html>
<head>
<title>Auto Resize Textarea using Javascript</title>
</head>
<body>
<h2>Auto Resize Textarea using Javascript - CodePlaners.com</h2>
<strong>textarea:</strong>
<br/>
<textarea id="textarea" style="width: 400px;"></textarea>
<script type="text/javascript">
textarea = document.querySelector("#textarea");
textarea.addEventListener('input', autoResize, false);
function autoResize() {
this.style.height = 'auto';
this.style.height = this.scrollHeight + 'px';
}
</script>
</body>
</html>
Step 2 :- Jquery
<!DOCTYPE html>
<html>
<head>
<title>Auto Resize Textarea using Jquery</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<h2>Auto Resize Textarea using Jquery - CodePlaners.com</h2>
<strong>textarea :</strong>
<br/>
<textarea id="textarea" style="width: 400px;"></textarea>
<script type="text/javascript">
$('#textarea').on('input', function () {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
});
</script>
</body>
</html>