Automatically resize textarea height to fit text with JavaScript/jQuery

This post will discuss how to automatically resize textarea height to fit with the text using JavaScript and jQuery.

To automatically resize textarea height to fit the text, we can use the Element.scrollHeight, which gives the actual height of an element’s content, including overflow. It is the minimum height the element would require to fit all the content on the screen.

The idea is to bind an event handler to the keyup and keypress JavaScript event. This is demonstrated below in jQuery:

JS

$(document).ready(function() {

$('textarea').on('keyup keypress', function() {

$(this).height(0);

$(this).height(this.scrollHeight);

});

HTML

<label for="story">Tell us your story:</label>

It was a dark and stormy night…

</textarea>

Edit in JSFiddle

Another solution is to use an external library for this task. Autosize is a lightweight, standalone popular JavaScript library to automatically adjust textarea height to fit the text. Here’s a working example:

JS

document.addEventListener('DOMContentLoaded', function() {

autosize(document.querySelectorAll('#story'));

}, false);

HTML

<!doctype html>

<head>

</head>

<body>

<label for="story">Tell us your story:</label>

<textarea id="story" name="story" rows ="3" cols="33">It was a dark and stormy night…</textarea>

</body>

</html>

Edit in JSFiddle

Alternatively, you can also use jquery.ns-autogrow or jquery-grab-bag jQuery plugins, which automatically adjust textarea width/height based on user input.

That’s all about automatically resize textarea height to fit text in JavaScript and jQuery.