Hariom
Prajapati
30 Jun 2022
JQueryIn this tutorial we will see how to auto resize textarea based on content using jQuery.
In this we will use two functionalities in which first is use to decrease the size of textarea based on content and second is use to increase the size of textarea based on content.
we can resize textarea also using javascript which we explain in previous tutorial.
Let's see the example to resize height of textarea based on content usisg jQuery.
How to Make Textarea Auto Resize using jQuery?
<!DOCTYPE html>
<html>
<head>
<title>How to auto resize textarea based on content using jQuery?</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<h1>How to auto resize textarea based on content using jQuery?</h1>
<textarea id="textareaId" style="width: 800px;"></textarea>
<script type="text/javascript">
$('#textareaId').on('input', function () {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
});
</script>
</body>
</html>
Output
