This is a much-needed update of the slightly buggy 2009 version
A plugin for jQuery which changes the dimensions of input elements to suit the amount of data entered. It operates on textarea
, input[type=text]
and input[type=password]
elements.
Usage is as follows:
$('textarea#foo').autoResize();
You can pass options:
$('textarea#foo').autoResize({
maxHeight: 200,
minHeight: 100
});
Available options include:
extraSpace
: (default:50
) A number to signify how many pixels of free space beyond the last letter typed you want the element to resize to. Warning: Resizing<input>
elements won't work properly unless this is set to around the equivelant of1em/16px
.minWidth
: (default:"original"
) A number or the string"original"
to signify the current width as the minimum (note: This option is only useful on<input>
elements, i.e. elements that resize width-ways)maxWidth
: (default:500
) A number or the string"original"
to signify the current width as the maximum (note: This option is only useful on<input>
elements, i.e. elements that resize width-ways)minHeight
: (default:"original"
) A number or the string"original"
to signify the current height as the minimum (note: This option is only useful on<textarea>
elements, i.e. elements that resize height-ways)maxHeight
: (default:500
) A number or the string"original"
to signify the current height as the maxiumum (note: This option is only useful on<textarea>
elements, i.e. elements that resize height-ways)onBeforeResize
: A callback function fired just before a resize occurs.onAfterResize
: A callback function fired just after a resize occurs.animate
: (default:{duration: 200}
) Set to eitherfalse
or an animation configuration object, i.e. the one passed as the second argument tojQuery.fn.animate
. This signifies whether or not the element should animate when it resizes (set tofalse
if you don't want animation).
You can unbind listeners bound to by this plugin like so:
$(foo).unbind('.autoResize');
... or destroy everything, including stub clone objects used for the effect:
$(foo).data('AutoResizer').destroy();
Please report bugs in Github (the issues tab).
- Opera 11.5
- Firefox 4/6
- Safari 5.0
- IE9 (IE6-8 too, but see below)
- Chrome 15
Note: It will work in IE6-8 also, but only if your TEXTAREA has display:block;
(display:inline;
, the default, doesn't appear to work very well)
1.1
- Starting version, forked from original.1.11
- Added support for pasting (thanks to Alex), and fixed bug with width not being copied.1.12
- Bug fix (crucial for multiple AutoResizables on a single page)1.13
- Now handles accidental instantiation on the same element more than once. Previous AutoResizer instances will be destroyed (events unbound, references removed, element clones removed etc.).1.13.1
- Issue 9 fixed.1.13.2
- Issue 14 fixed.1.13.3
- Issue 15 fixed.1.13.4
- Issue 16 fixed.1.14
- AddedonBeforeResize
andonAfterResize
callbacks (onResize
is deprecated but still works)..check()
now only runs when the value of the element has changed (avoids non-character-keys issue, e.g. CTRL+A). Initial.check()
call is only done if the element is currently visible (Issue 13). If you're making an element visible and wish to trigger a resize, do$(yourEl).data('AutoResizer').check()
.