Auto Grow a Textarea with JavaScript in CSS

CSSJavascriptWeb DevelopmentFront 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

 Live Demo

<!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 −

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