Hi Developer, In this tutorial we will learn textarea auto increase height using jquery, we create simple example 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.
So look at the example below
Example 1
<!DOCTYPE html>
<html>
<head>
<title>Textarea Auto Increase Height - phpicoder.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 - phpicoder.com</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<h1>Textarea Auto Increase Height - phpicoder.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...
Related Post