How to create auto-resize textarea using JavaScript/jQuery ?
Last Updated :
12 Jul, 2025
Creating an auto-resize textarea using JavaScript or jQuery means dynamically adjusting the height of the textarea to fit its content as the user types. This enhances user experience by preventing the need for scrolling within the textarea, ensuring all content is visible.
Method 1: Using JavaScript
Using JavaScript to create an auto-resize textarea involves adjusting the textarea’s height dynamically based on its content. This is achieved by setting the height to auto and then to its scrollHeight on the input event, ensuring it expands as the user types.
Example: In this example, we creates an auto-resizing textarea using JavaScript. The textarea dynamically adjusts its height based on the input, handling typing, cutting, and pasting actions smoothly.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
How to create auto-resize
textarea using JavaScript/jQuery ?
</title>
<style>
#autoresizing {
display: block;
overflow: hidden;
resize: none;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
Creating a textarea with
auto-resize in JavaScript
</b>
<p>
The textarea below will resize
automatically accounting for
cut, paste and typing text.
</p>
<textarea id="autoresizing">
Try cutting, pasting
or typing here
</textarea>
<script type="text/javascript">
textarea = document.querySelector("#autoresizing");
textarea.addEventListener('input', autoResize, false);
function autoResize() {
this.style.height = 'auto';
this.style.height = this.scrollHeight + 'px';
}
</script>
</body>
</html>
Output:
How to create auto-resize textarea using JavaScript/jQuery ?Method 2: Using jQuery
Using jQuery, you can create an auto-resize textarea by attaching an input event handler with the on() method. The handler sets the textarea's height to auto and then to its scrollHeight, ensuring it dynamically resizes to fit the content as you type.
Example: In this example, we creates an auto-resizing textarea using jQuery. The textarea automatically adjusts its height based on user input, including typing, cutting, and pasting, for smoother user interaction.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
How to create auto-resize textarea
using JavaScript/jQuery ?
</title>
<style>
#autoresizing {
display: block;
overflow: hidden;
resize: none;
}
</style>
<script src=
"https://code.jquery.com/jquery-3.4.1.min.js">
</script>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
Creating a textarea with
auto-resize in JavaScript
</b>
<p>
The textarea below will resize
automatically accounting for cut,
paste and typing text.
</p>
<textarea id="autoresizing">
Try cutting, pasting or typing here
</textarea>
<script type="text/javascript">
$('#autoresizing').on('input', function () {
this.style.height = 'auto';
this.style.height =
(this.scrollHeight) + 'px';
});
</script>
</body>
</html>
Output:
How to create auto-resize textarea using JavaScript/jQuery ?jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous for its philosophy of “Write less, do more". You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.
Similar Reads
How to change the shape of a textarea using JavaScript ? In General, Textarea will be in the form of rectangular or square shapes, but here we will deal with Unusual shapes of textarea which means this textarea will not be regular shapes but editable. Method 1: In the first method, let's see the irregular editable textarea created using CSS-shapes and con
2 min read
How to Disable Textarea using JavaScript? This article will show you how to disable the textarea using JavaScript. Disabling a textarea using JavaScript can be done by setting the disabled property of the textarea element to true. This prevents the user from editing the content of the textarea. There are some reasons to use disabled textare
2 min read
How to Add Text Formatting to a Textarea using JavaScript? To add text formatting (such as bold, italic, or inserting special characters) to a <textarea> using JavaScript, you can manipulate the selected text or insert formatted text at the cursor position. This can be done by directly modifying the value of the <textarea> based on user interact
3 min read
How to make a word count in textarea using JavaScript ? Counting words may be useful in scenarios where the user is recommended to enter a certain number of words and the word counter can keep track of the same. Below are approaches to make a word count in textarea using JavaScript:Table of Content Calculating the number of spaces present in the textSepa
4 min read
How to Disable Resizable Property of Textarea using CSS? The resize property is used to disable the resizeable property of Textarea using CSS, by setting the resize property to none.Note: The resize property in CSS controls whether an element, like a textarea, can be resized by the user.Disable Resizing of TextareaThe resize property in CSS controls an el
1 min read
Create a Character Limit Textarea using HTML CSS and JavaScript In this article, we will create a Character Limit Textarea using HTML, CSS, and JavaScript.In this application, we will display the text area as an input component to the user and there is a predefined limit set to accept the input. When the limit is been crossed the user will get the alert message
6 min read