jQuery Plugins › jQuery Form Plugins › jQuery Autosize

Dynamic Textarea Resizing Plugin with jQuery - autosize

File Size: 9.99 KB
Views Total: 13081
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

More in this category...

View Recommended Plugins

TOP jQuery Plugins For 2024

Chrome, IE8+, FireFox, Opera, Safari#Resize#Textarea#CSS3#transitions
Dynamic Textarea Resizing Plugin with jQuery - autosize

autosize is an useful and user-friendly jQuery Plugin that makes your form textarea elements automatically and dynamically resizing based on your users input. By using CSS3 transitions attribute, this plugin can resize the textarea smoothly and supports in all major browsers.

You might also like:

Basic Usage:

1. Include jQuery Library and jquery.autosize.js

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
<script src='jquery.autosize.js'></script>

2. Call the plugin

$(function(){
$('#normal').autosize();
$('#animated').autosize({append: "\n"});
});

3. Markup

<textarea id='normal'>Not animated.</textarea>
<textarea id='animated'>With CSS transition.</textarea>

4. The CSS

#animated {
vertical-align: top;
-webkit-transition: height 0.2s;
-moz-transition: height 0.2s;
transition: height 0.2s;
}

5. Options available.

className: 'autosizejs',
id: 'autosizejs',
append: '\n',
callback: false,
resizeDelay: 10,
placeholder: true

Change Logs:

v1.18.18 (2015/02/25)

  • Fix Content Security Policy (CSP) warnings about unsafe-inline styles.

v1.18.17 (2014/12/10)

  • Fixed potential issue when using transforms to scale a textarea.

v1.18.16 (2014/12/10)

  • Treat height differences smaller than 1/100px as equal. 

v1.18.15 (2014/11/12)

  • Replaced parseInt with parseFloat to support sub-pixel values.

v1.18.14 (2014/10/31)

  • Fixed potential IE8 issue. 

v1.18.12 (2014/10/04)

  • Allow setting the append property to falsey values. 

v1.18.12 (2014/09/10)

  • Replace window.jQuery with jQuery.

v1.18.9 (2014/05/28)

  • Minor change to fix potential IE8 negative width bug. 

v1.18.8 (2014/05/21)

  • Minor change to logic for applying the CSS resize property. 

v1.18.6 (2014/04/13)

  • Very minor change to better represent condition for taking the element width from the style object.
  • Added a newline character by default to the textarea element for smoother behavior in IE.

v1.18.6 (2014/03/14)

  • Fixed incorrect size when setting the HTML5 textarea wrap attribute to 'hard'

v1.18.5 (2014/03/11)

  • Added 'id' property for setting the id of the mirrored textarea element

v1.18.4 (2014/01/12)

  • If textarea displays placeholder text, use placeholder text for sizing.

v1.18.3 (2014/01/11)

  • Allow correct width calculation of hidden textarea elements, when they have a specified width. Fixes #134

v1.18.2 (2014/01/07)

  • Checked getComputedStyle return value to avoid potential error exception.

v1.18.1 (2013/12/01)

  • Fixed RequireJs and define issue.

v1.18.0 (2013/10/21)

  • Fixed error that was being thrown in FireFox 3.x.

v1.17.8 (2013/9/8)

  • Minor change to not append the mirror element when the plugin is applied to an empty jQuery collection.

v1.17.7 (2013/9/4)

  • Reverted to an earlier fix for a Chrome issue. Too many issues with using setSelectionRange. 

v1.17.6 (2013/8/23)

  • Fixed a potential issue introduced in 1.17.4 that causes an 'NS_ERROR_FAILURE' error in Firefox

v1.17.5 (2013/8/23)

  • fixed oversight in previous commit that caused FireFox fix not to be applied.

v1.17.4 (2013/8/22)

  • Improved speed of editing large blocks of text in FireFox.

v1.17.3 (2013/8/22)

  • resolved an issue that was causing slowing down initialization for text-intensive textareas in Chrome
  • Fixed potential memory leak when using autosize.destroy.

v1.17.1 (2013/6/22)

  • Fixed potential memory leak when using autosize.destroy.

v1.16.17 (2013/6/19)

  • Renamed 'autosize' event to 'autosize.resize'
  • Renamed 'autosize.includeStyle' event to 'autosize.resizeIncludeStyle'
  • Fixes problem introduced in 1.16.18 with manually triggering the 'autosize' event:

v1.16.17 (2013/6/13)

  • Fixed a compatability issue with jQuery versions before 1.9 introduced in the previous update

v1.16.14 (2013/6/7)

  • Fixed an issue with autosize working poorly if the mirror element has a transition applied to it's width.

v1.16.13 (2013/6/5)

  • Fixed a Chrome cursor position issue introduced with the reflow workaround added in 1.16.10.

v1.16.12 (2013/6/1)

  • Much better efficiency and smoothness for IE8 and lower.
  • Fixed a default height issue in IE8 and lower.

v1.16.10 (2013/5/31)

  • Dropped scrollHeight for scrollTop. This fixed a height problem relating to padding.
  • Re-added workaround to get Chrome to reflow text after hiding overflow.

v1.16.9 (2013/5/20)

  • Reverted change from 1.16.8 as it caused an issue in IE8.

v1.16.7 (2013/3/21)

  • Added workaround for a very edge-case iOS bug.

v1.16.6 (2013/3/13)

  • Replaced jQuery shorthand methods with on() in anticipation of jQuery 2.0 conditional builds.

v1.16.5 (2013/3/13)

  • Fixed a bug where triggering the autosize event immediately after assigning autosize had no effect.

v1.16.4 (2013/2/11)

  • Fixed a bug where triggering the autosize event immediately after assigning autosize had no effect.

This awesome jQuery plugin is developed by jackmoore. For more Advanced Usages, please check the demo page or visit the official website.