Learning 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:

• Set Max Length for ASP.NET MultiLine Textbox using jQuery
• How to scroll to the bottom of a textarea using jQuery

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();
});

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;
}

Feel free to contact me for any help related to jQuery, I will gladly help you.