Hellow developer, In this post we will learn textarea auto increase height using jquery, we create best example and demo for adjust textarea height like user enter new line and increase height in textarea
You need to textarea set content based auto height using jquery. If yes you are in the right place. And I'll give you two examples of automating texture height using jquery.
Auto Resize highlight makes a textarea more user-friendly. It extends the stature of textarea naturally based on the substance. On the off chance that your web frame contains a textarea, you'll include the auto resize highlight to resize stature consequently to fit the substance. In this instructional exercise, we'll appear you how to auto resize textarea utilizing jQuery.
In case you would like to set textarea auto stature based on content using jquery at that point i will assist you how to auto resize stature of textarea in jquery. i will deliver you two cases of auto alter textarea tallness utilizing jquery.
So look at the example below
Example 1
<!DOCTYPE html>
<html>
<head>
<title>Textarea Auto Increase Height - webthestuff.com</title>
</head>
<body>
<h1>Textarea Auto Increase Height - phpicoder.com</h1>
</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>
Example 2
<!DOCTYPE html>
<html>
<head>
<title>Textarea Auto Increase Height - webthestuff.com</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<h1>Textarea Auto Increase Height - webthestuff.com</h1>
</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...
