Auto height textarea

Auto-change of <textarea> height can be done in the following way:

<textarea id="textarea" placeholder="Enter text..."></textarea>
HTML
$('#textarea').on('input', function(){
	this.style.height = '1px';
	this.style.height = (this.scrollHeight + 6) + 'px'; 
});
JS
#textarea {
	display: block;
	width: 500px;
	box-sizing: border-box;
	margin: 0 0 5px 0;
	padding: 10px;
	border: solid 3px #e06969;
	background-color: #fff;
	min-height: 54px;
	font-size: 14px; 
	line-height: 1.2;
}
CSS

(this.scrollHeight + 6) - is selected experimentally and depends on the thickness of the borders and indents.

JQuery plugin

There is also an extension - Autosize. It increases the field more steadily, sets the min-height - therefore, it does not allow resizing less than the current height.

<textarea id="textarea" placeholder="Enter text..."></textarea>

<script src="/jquery.min.js"></script>
<script src="/autosize/dist/autosize.min.js"></script>

<script>
autosize($('#textarea'));
</script>
HTML
09.10.2019, updated 21.02.2021
174

Comments

to add a comment.

Other publications

Refresh the page with JS / HTML / PHP
Collection of methods for reloading a page or browser tab.
306
0
Close browser tab using JavaScript
To close the current tab or browser window in JS, just call the method...
2123
0
How to make blocks of the same height
The easiest way to make blocks with the same height is using jQuery, for example, let's take the following block layout.
65
0