To make a textarea auto resizable with jQuery, use the following codes.
<html>
<head>
<title>Auto Resize textarea with jQuery - W3Epic.com</title>
<style>
.auto-text-area{
min-height: 20px; /* for default height */
overflow: hidden;
resize: none;
padding: 4px;
font-size: 14px;
border: 1px solid #000;
}
</style>
<script src="http://127.0.0.1/jquery-2.0.3.min.js"></script>
</head>
<body>
<textarea class="auto-text-area" placeholder="This is texearea"></textarea>
<hr />
<a href="http://w3epic.com/" rel="follow">W3Epic.com</a>
<script>
$('.auto-text-area').on('keyup',function(){
$(this).css('height','auto');
$(this).height(this.scrollHeight);
});
</script>
</body>
</html>For any query, just leave a comment.
Thank you.
Fantastic, thx for this code.
You Welcome
Elegant one! Thank you!
You’re welcome 🙂
sir how to use on load insted of on key up
This code is buggy!
When the textarea so height that parent element has a scroll, then it generate a ghost click!