Elastic jQuery Plugin Makes Your Textareas Grow Facebook Style

Elastic JQuery Plugin, inspired by the auto growing textarea on Facebook, makes your textareas shrink and grow to fit its content. Also, the grow & shrink process can be animated. The major difference between Elastic and its competitors is its weight. The usage of Elastic is very straight forward. All you have to do is include the JavaScript file containing the plugin and use the elastic method.


Auto-Growing Textarea with jQuery and MooTools

AutoGrowing Textarea JQuery Plugin was inspired by Facebook’s auto-expanding text areas and makes it easy to have auto-growing textareas. The textarea grows and shrinks to fit it’s content, but does not exceed the minimum height you specify via CSS.


Required TextArea CSS Attributes:

  • line-height
  • min-height

You are required to have some basic styles for your textarea for it to work properly, but it’s really not that hard. The solution is simply to create a hidden div that mimics the textarea’s style and then when the height of the div surpasses the height of the textarea, we adjust the size of the textarea.

Flext: MooTools Auto-Growing Textrea Plugin, by Graham McNicoll

flext-mootools auto-growing-textrea-plugin

Features include:

  • Very easy to implement
  • Grows text areas when needed
  • Maximum Height to Grow To
  • Can grows parents if they have a fixed height
  • Ghost text/text overlay for input context and help
  • Text input emulation (enter can submit form, instead of new line)