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 textareasautogrow.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 totrue. Set tofalseif you don't want the resizing of the box to be animated.speed: defaults to 200. Speed of the resize animation.fixMinHeight: defaults totrue. Set tofalseif 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 tofalse. Will trigger autogrow on init.
Example:
var opts = {
context: $('li')
, animate: false
, cloneClass: 'faketextarea'
};
$('.mytextareas').autogrow(opts);autogrow:grow and autogrow:shrink events will fire when a grow or shrink animation completes (or immediately if there are no animations). You can get the textarea this applies to by looking at the event.target
The event will be raised against the context you pass into the options.
Example:
$('#context-element').on('autogrow:grow', function(e) {
var box = $(e.target);
console.log(box.height());
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent