jQuery Plugin: BetterGrow Your Words

Many things grow, but none grow better than when they BetterGrow.  Used by products such as Facebook and Basecamp, textareas that can adapt to user input, growing or shrinking their height to the demands of the text entered, provide an oft-desired minimalistic user experience of progressive enhancement – providing just what is needed by the consumer when it is needed.

Despite the widespread appeal of dynamic height textareas, I have been unable to find one such code snippet or JavaScript plugin that would meet all my needs; the most important of which was responsiveness.  Every dynamic textarea plugin that I found had some shortcoming, from delayed reaction to required grow/shrink event, to annoying visual flickers and blinks.  BetterGrow was designed to have none of these quirks, and simply grow (and shrink) better, based on the specified options and text content.

I wanted a dynamic and customizable textarea that kept up with me, that

didn’t wait until I was done typing to resize,
was much more ‘elastic’ than other similar plugins,
never obscured the entered text,
adapted both quickly and smoothly to the user.

So, I wrote the BetterGrow jQuery plugin and open-sourced it under both GPL and MIT License so that I, and everyone else, could benefit from a textarea that didn’t just grow, but grew better when it had BetterGrow. 😉

Usage

BetterGrow is a customizable jQuery plugin for enabling the improved, dynamic expansion of a textarea.

<div>
	<textarea id="area51">
	</textarea>
</div>

$('#area51').BetterGrow({ / * OPTIONS * / });

When the text within the target textarea exceeds the initial textarea height the textarea increases its height sufficiently to accommodate the new text.

When the text within the target textarea decreases sufficiently to allow for a lesser height, and the height is greater than the minimum textarea height or initial textarea height, then the textarea height is reduced to the minimum height required to display the text within, while not obscuring the visibility or requiring a scrollbar to view any of the text

Important:  The textarea must reside within an encapsulating DIV.  And, to avoid problems in IE, you should explicitly set the textarea’s width.

Method

When initialized, the textarea object and its parent DIV have their attributes adjusted.  The method implementation supports chaining and returns the jQuery object.

The DIV should add no size to the textarea object or region.  DIV height is automatically set to AUTO.

The textarea’s overflow is set to HIDDEN and the WIDTH is set to the current WIDTH. (FYI:  WIDTH of textarea must be defined to work in IE)

If the DIV is missing, the plugin will attempt to wrap the textarea in a new DIV.  It is recommended that all targeted textareas are wrapped in a DIV before calling BetterGrow to avoid unexpected behavior.

If the textarea already has text within it when BetterGrow is initialized, the textarea’s height is automatically adjusted to fit the text (if a height greater than the initial height is needed to present the text unobscured).

Settings

By default, the textarea’s initial empty height, aka minimum height, is set to 26px, with no special event handling enabled.  These and many other characteristics are fully customizable, and fully itemized and explained below.

To change these settings, they can either be accessed directly…

$.fn.BetterGrow.settings.initial_height = 100px;

… or at the time of initialization…

$('#area52').BetterGrow({
	initial_height:	50px,
	on_enter:		function() {
        				submit_form();
				},
	do_not_enter:	false
});

The default settings data structure is…

$.fn.BetterGrow.settings = {
	initial_height:	26,                // specified in pixels
	on_enter:		null,         // callback function; if specified, this is called when enter is pressed
	do_not_enter:	true         // if true and on_enter is not null then enter event does not cascade / pass-through to textarea
};

The parameters are defined (and all can be overridden) thus…

initial_height

• minimum height in pixels for the textarea
• if the textarea is EMPTY, this is the initial height

on_enter

• callback function that is called when ENTER is pressed within the target textarea(s)
• by default, on_enter is DISABLED (set to NULL)

do_not_enter

• if on_enter is ENABLED (pointing to a callback function) and
  • if do_not_enter is TRUE,  then the ENTER event DOES NOT CASCADE / pass-through to the text area
  • if do_not_enter is FALSE, then the ENTER event will trigger the calling of the function referenced by on_enter and be reflected within the textarea
• In other words, if TRUE then the content of the textarea will not change as a direct result of the user pressing ENTER.

Get It

You can download BetterGrow, dual licensed under GPL and MIT, from…

Git
Public Clone URL: git://github.com/theproductguy/BetterGrow.git
GitHub: http://github.com/theproductguy/BetterGrow

Demo

http://theproductguy.com/bettergrow/bettergrow.demo.html

If you find this useful, or have any questions, ideas, or issues, leave a comment.

Enjoy!

Jeremy Horn
The Product Guy