/autogrow

Automatically grow and shrink textareas with the content as you type.

Primary LanguageJavaScript

autogrow.js

endorse

autogrow.js is a jQuery plugin that, like most plug-ins, was built out of frustration for lack of support for a much-needed feature, namely the ability for a textarea to automatically grow and shrink dynamically with its content. I received a head-start from this post, but decided I needed more functionality. It handles the paste event and 'ctrl+x', or cutting.

Basic usage (Interactive Demo):

$('textarea').autogrow(); //or some selector that will grab textareas

autogrow.js has some options that you can set:

  • context: defaults to $(document). The parent element events will be delegated to. If you want to simply use defaults but want to pass in a context, you can just do that like this: $('textarea').autogrow($('.myContext'));
  • animate: defaults to true. Set to false if you don't want the resizing of the box to be animated.
  • speed: defaults to 200. Speed of the resize animation.
  • fixMinHeight: defaults to true. Set to false if you don't want the box to stop shrinking when it hits its initial size.
  • cloneClass: defaults to 'autogrowclone'. Helper CSS class for the clone used for measuring sizes. Use this if you need to apply special rules for a textbox that is right next to the one you're autogrowing, but not exactly it so that they are identical.
  • onInitialize: defaults to false. Will trigger autogrow on init.
  • onResize: defaults to false. Callback function, will be executed after the resize, will be passed the event object and the textarea object as parameters. On init, the event is undefined. If animation is enabled, it is executed after the animation completes.

Example:

var opts = {
    context: $('li')
    , animate: false
    , cloneClass: 'faketextarea'
    , onResize: function(event, textarea) {
		'your stuff...';
	}
};
$('.mytextareas').autogrow(opts);