ExpandingTextarea jQuery Plugin

As its name implies, ExpandingTextarea is a plugin that lets you create a multiline input control where the user can key in lengthy information, but instead of introducing a vertical scrollbar into the field to indicate entries already not visible, the text area itself increases in size as the use keys in more string of data.

There are two ways to use this plugin: one is with the use of a CSS class aptly called ‘expanding’

<textarea class=’expanding’></textarea> 

And the other is by calling the “expandingTextarea()” method.

$(document).ready(function () {
 $(“#txtNotes”).expandingTextarea();
});   

Making adjustments to the textarea’s size/appearance can be done by simple CSS.

textarea{
 min-height: 6em;
 max-height: 8em;
 width:400px;
}  

Some notable features about this plugin are:

• Mobile friendly.

• Wide browser support (IE6+, Safari, Chrome, FireFox, Opera).

• No cols hacks or counting characters.

• Resize friendly. That is, content automatically resizes without using the ‘window.resize’ event or JavaScript to calculate sizes.

• Easy to style

You can find the Live Demo over at its jsFiddle page.