Submit your widget

jquery-autosize - Automatically adjust textarea height based on user input.

Created 5 years ago   Views 3322   downloads 1017    Author jacklmoore
View DemoDownload
Share |

Small jQuery plugin to allow dynamic resizing of textarea height, so that it grows as based on visitor input. To use, just call the .autosize() method on any textarea element. Example $('textarea').autosize();. See the project page for documentation, caveats, and a demonstration. Released under the MIT license.

  • Fixed potential issue when using transforms to scale a textarea. Fixes #190.
  • Treat height differences smaller than 1/100px as equal. Merges #189.
  • Replaced parseInt with parseFloat to support sub-pixel values. Merges #185.
  • Fixed potential IE8 issue. Merged #181.
  • Allow setting the append property to falsey values. Fixes #177, Ref #168, Ref #166.
  • Replace window.jQuery with jQuery. Fixes #176.
  • Merged request for autosize.resized event. Fixes #149.
  • Added white-space to the list of monitored textarea properties.
  • Minor change to fix potential IE8 negative width bug. Fixes #157 Fixes #158
  • Minor change to logic for applying the CSS resize property. Fixes #156
  • Very minor change to better represent condition for taking the element width from the style object. Fixes #147
  • Added a newline character by default to the textarea element for smoother behavior in IE. Reference #148
  • Fixed incorrect size when setting the HTML5 textarea wrap attribute to 'hard'.
  • Added 'id' property for setting the id of the mirrored textarea element
  • If textarea displays placeholder text, use placeholder text for sizing. Ref #130, Ref #84.
  • Allow correct width calculation of hidden textarea elements, when they have a specified width. Fixes #134
  • Checked getComputedStyle return value to avoid potential error exception. Fixes #133
  • Removed AMD support. Fixes #109 Ref #56.
  • Fixed error that was being thrown in Firefox 3.x. Fixes #112
  • Minor change to not append the mirror element when the plugin is applied to an empty jQuery collection
  • Reverted to an earlier fix for a Chrome issue. Too many issues with using setSelectionRange.
  • Fixed a potential issue introduced in 1.17.4 that causes an 'NS_ERROR_FAILURE' error in Firefox.
  • Fixed oversight in 1.17.4 that caused Firefox fix not to be applied.
  • Improved speed of editing large blocks of text in Firefox.
  • Resolved an issue that was causing slowing down initialization for large blocks of text in Chrome.
  • Renamed minified file from jquery.autosize-min.js to jquery.autosize.min.js
  • Added support for loading as an AMD module.
  • Added package.json for installing through NPM.
  • Fixed potential memory leak when using autosize.destroy.
  • 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:
  • Minor improvement to the destroy event.
  • Added event for removing autosize from a textarea element: $('textarea.example').trigger('autosize.destroy');
  • Added event for manually triggering resize that also accounts for typographic styles that have changed on the textarea element. Example: $('textarea.example').css('text-indent', 25); $('textarea.example').trigger('autosize.includeStyle');
  • Minor optimization
  • Fixed a compatibility issue with jQuery versions before 1.9 introduced in the previous update.
  • Fixed an issue where the calculated height might be slightly off in modern browsers when the width of the textarea has a sub-pixel value.
  • Reduced how frequently autosize is triggered when resizing the window. Added resizeDelay property so that the frequency can be adjusted or disabled.
  • Fixed an issue with autosize working poorly if the mirror element has a transition applied to it's width.
  • Fixed a Chrome cursor position issue introduced with the reflow workaround added in 1.16.10.
  • Much better efficiency and smoothness for IE8 and lower.
  • Fixed a default height issue in IE8 and lower.
  • Dropped scrollHeight for scrollTop. This fixed a height problem relating to padding. (Fixes #70)
  • Re-added workaround to get Chrome to reflow text after hiding overflow.
  • Reverted change from 1.16.8 as it caused an issue in IE8. (Fixes #69)
  • Fixed issue where autosize was creating a horizontal scrollbar for a user
  • Added workaround for a very edge-case iOS bug (Fixes #58).
  • Replaced jQuery shorthand methods with on() in anticipation of jQuery 2.0 conditional builds
  • Fixed a bug where triggering the autosize event immediately after assigning autosize had no effect.
  • Fixed a conflict with direction:ltr pages.
  • Added minified file back to repository
  • Minor box-sizing issue dealing with min-heights.
  • Added to
  • Reworked to only create a single mirror element, instead of one for each textarea.
  • Dropped feature detection for FF3 and Safari 4.
  • Added 'append' option for appending whitespace to the end of the height calculation (an extra newline improves the apperance when animating).
  • Added a demonstration of animating the height change using a CSS transition.
  • Added optional callback that fires after resize.
  • Fixed a bug I introduced in the last update.
  • Added workaround to get Chrome to reflow default text better.
  • Added 'lineHeight' to the list of styles considered for size detection.
  • Added 'textIndent' to the list of styles considered for size detection.
  • Added vender prefixes to box-sizing detection
  • Added conditional so that autosize cannot be applied twice to the same element

  • When autosize is applied to an element, it will have a data property that links it to the mirrored textarea element. This will make it easier to keep track of and remove unneeded mirror elements. Example:

    $('textarea.example').data('mirror').remove(); // delete the mirror

    $('textarea.example').remove(); // delete the original

  • Now supports box-sizing:border-box
  • added binding to allow autosize to be triggered manually. Example: $('#myTextArea').trigger('autosize');
  • fixed a regression in detecting Firefox support
  • added branching to exclude old browsers (FF3- & Safari4-)
  • fixed a regression in 1.1 relating to Opera.
  • fixed a regression in 1.1 that broke autosize for IE9.
  • autosize now follows the max-height of textareas. OverflowY will be set to scroll once the content height exceeds max-height.
  • first release