If you need to see example of javascript textarea grow automatically. i explained simply about javascript auto expand textarea. i would like to show you javascript autosize textarea height. step by step explain how to make textarea auto resize using javascript.
If you need to set textarea auto height based on content using javascript then i will help you how to auto resize height of textarea in javascript. i will give you two examples of auto adjust textarea height using javascript.
So, let's see bellow preview and examples:
Preview:
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 - HDTuto.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>
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 - HDTuto.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...
Do you like below Tutorials ?
- PHP Laravel 5.5 - import export data into excel and csv using maatwebsite
- Laravel 7.x and 6.x create custom facade example from scratch
- Node JS - Get Real time online users counter using socket io example
- PHP Laravel 7.x and 6.x - Bootstrap Admin Theme Integration example from scratch
- MySQL Query - How to select records of today to next Sunday ?
- Laravel 7.x and 6.x - username custom validation example
- Laravel 5.5 - Import Extract zip file using chumper/zipper package
- PHP Laravel Set Custom Validation Error Messages Example