Expand textarea as you type using jQuery

Textarea or ASP.NET Textbox with Multiline mode controls are useful for accepting for length inputs. If fixed height is assigned then you will find vertical scrollbar. But it will be a nice feature to expand the textarea as users types. So in this post, Find jQuery code to expand textarea as user type using jQuery plugin named "ExpandingTextarea".

Related Post:

Plugin Highlights


  • Expanding Text Areas Made Elegant
  • Mobile Friendly
  • Wide browser support. Works in IE6+, Safari, Chrome, Firefox, Opera
  • No cols hacks, or counting characters
  • Easy to style
  • Resize Friendly. Content automatically resizes without using the window.resize event or JavaScript to calculate sizes!

How to use it?


The very first thing you need to do is to download the plugin file. So once you have downloaded the file, include its reference along with jQuery reference.
<script src='expanding.js' type='text/javascript'></script>
Now, all you need to do is to define a textarea with css class 'expanding' and that's it. The plugin finds textareas with the 'expanding' class on page load and initializes them for you.
<textarea class='expanding'></textarea>
OR, if you want to use jQuery way then call "expandingTextarea()" method on the textarea element.
$(document).ready(function () {
    $("#txtNotes").expandingTextarea();
});
Live Demo
If you want to change the height and width then it can be done using simple css.
textarea{
    min-height: 6em;
    max-height: 8em;
    width:400px;
}
Official Website
Feel free to contact me for any help related to jQuery, I will gladly help you.
SHARE

Nothing shocks me, I'm a Software Engineer. And I am not young enough to know everything. I live in World Wide Web and from there take care of this website. This website communicates about my work, learning and experience. I believe life is short, and it is for loving, sharing, learning and connecting. So lets connect..