Auto Grow a Textarea with JavaScript in CSS

CSS Javascript Web Development Front End Technology

Using JavaScript, we can set our Textarea element to automatically grow with its content

The following examples illustrate how we can achieve the above scenario.

Example

<!DOCTYPE html>
<html>
<head>
<style>
* {
   margin: 3%;
   color: navy;
   font-size: 1.2em;
}
#ta {
   padding: 2%;
   resize: none;
   width: 330px;
   min-height: 80px;
   overflow: hidden;
   box-sizing: border-box;
}
</style>
</head>
<body>
<form>
<label for="ta">Cool TextArea</label>
<textarea id="ta"></textarea>
</form>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$("#ta").on('input', function() {
   var scroll_height = $("#ta").get(0).scrollHeight;
   $("#ta").css('height', scroll_height + 'px');
});
</script>
</body>
</html>

Output

This will produce the following result −

Example

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 3%;
   overflow-y: scroll;
}
#ta {
   padding: 2%;
   resize: none;
   width: 333px;
   min-height: 90px;
   overflow: hidden;
   box-sizing: border-box;
   font-size: 1.5em;
}
</style>
</head>
<body>
<div>
<textarea id="ta"></textarea>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$("#ta").on('input', function() {
   var scroll_height = $("#ta").get(0).scrollHeight;
   $("#ta").css('height', scroll_height + 'px');
});
</script>
</body>
</html>

Output

This will produce the following result −

AmitDiwan

Published on 13-Mar-2021 12:26:04

Previous Page Print Page