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!