How to Auto Resize a textarea with jQuery

krishnaTORQUE HTML, JavaScript, jQuery, Tutorial Tags: , , , , 6

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.

6 thoughts on “How to Auto Resize a textarea with jQuery

Leave a Reply

Note: Your email address will not be published. Required fields are marked *