jquery.autosize.js 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
  1. /*!
  2. Autosize v1.18.0 - 2013-10-20
  3. Automatically adjust textarea height based on user input.
  4. (c) 2013 Jack Moore - http://www.jacklmoore.com/autosize
  5. license: http://www.opensource.org/licenses/mit-license.php
  6. */
  7. (function (factory) {
  8. if (typeof define === 'function' && define.amd) {
  9. // AMD. Register as an anonymous module.
  10. define(['jquery'], factory);
  11. } else {
  12. // Browser globals: jQuery or jQuery-like library, such as Zepto
  13. factory(window.jQuery || window.$);
  14. }
  15. }(function ($) {
  16. var
  17. defaults = {
  18. className: 'autosizejs',
  19. append: '',
  20. callback: false,
  21. resizeDelay: 10
  22. },
  23. // border:0 is unnecessary, but avoids a bug in FireFox on OSX
  24. copy = '<textarea tabindex="-1" style="position:absolute; top:-999px; left:0; right:auto; bottom:auto; border:0; padding: 0; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; word-wrap:break-word; height:0 !important; min-height:0 !important; overflow:hidden; transition:none; -webkit-transition:none; -moz-transition:none;"/>',
  25. // line-height is conditionally included because IE7/IE8/old Opera do not return the correct value.
  26. typographyStyles = [
  27. 'fontFamily',
  28. 'fontSize',
  29. 'fontWeight',
  30. 'fontStyle',
  31. 'letterSpacing',
  32. 'textTransform',
  33. 'wordSpacing',
  34. 'textIndent'
  35. ],
  36. // to keep track which textarea is being mirrored when adjust() is called.
  37. mirrored,
  38. // the mirror element, which is used to calculate what size the mirrored element should be.
  39. mirror = $(copy).data('autosize', true)[0];
  40. // test that line-height can be accurately copied.
  41. mirror.style.lineHeight = '99px';
  42. if ($(mirror).css('lineHeight') === '99px') {
  43. typographyStyles.push('lineHeight');
  44. }
  45. mirror.style.lineHeight = '';
  46. $.fn.autosize = function (options) {
  47. if (!this.length) {
  48. return this;
  49. }
  50. options = $.extend({}, defaults, options || {});
  51. if (mirror.parentNode !== document.body) {
  52. $(document.body).append(mirror);
  53. }
  54. return this.each(function () {
  55. var
  56. ta = this,
  57. $ta = $(ta),
  58. maxHeight,
  59. minHeight,
  60. boxOffset = 0,
  61. callback = $.isFunction(options.callback),
  62. originalStyles = {
  63. height: options.defaultStyles!=undefined && options.defaultStyles['height']!=undefined ? options.defaultStyles['height'] : ta.style.height,
  64. overflow: options.defaultStyles!=undefined && options.defaultStyles['overflow']!=undefined ? options.defaultStyles['overflow'] : ta.style.overflow,
  65. overflowY: options.defaultStyles!=undefined && options.defaultStyles['overflow-y']!=undefined ? options.defaultStyles['overflow-y'] : ta.style.overflowY,
  66. wordWrap: options.defaultStyles!=undefined && options.defaultStyles['word-wrap']!=undefined ? options.defaultStyles['word-wrap'] : ta.style.wordWrap,
  67. resize: options.defaultStyles!=undefined && options.defaultStyles['resize']!=undefined ? options.defaultStyles['resize'] : ta.style.resize
  68. },
  69. timeout,
  70. width = $ta.width();
  71. if ($ta.data('autosize')) {
  72. // exit if autosize has already been applied, or if the textarea is the mirror element.
  73. return;
  74. }
  75. $ta.data('autosize', true);
  76. if ($ta.css('box-sizing') === 'border-box' || $ta.css('-moz-box-sizing') === 'border-box' || $ta.css('-webkit-box-sizing') === 'border-box'){
  77. boxOffset = $ta.outerHeight() - $ta.height();
  78. }
  79. // IE8 and lower return 'auto', which parses to NaN, if no min-height is set.
  80. minHeight = Math.max(parseInt($ta.css('minHeight'), 10) - boxOffset || 0, originalStyles.height);
  81. $ta.css({
  82. overflow: 'hidden',
  83. overflowY: 'hidden',
  84. wordWrap: 'break-word', // horizontal overflow is hidden, so break-word is necessary for handling words longer than the textarea width
  85. resize: (originalStyles.resize === 'none' || originalStyles.resize === 'vertical') ? 'none' : 'horizontal'
  86. });
  87. // The mirror width must exactly match the textarea width, so using getBoundingClientRect because it doesn't round the sub-pixel value.
  88. function setWidth() {
  89. var style, width;
  90. if ('getComputedStyle' in window) {
  91. style = window.getComputedStyle(ta, null);
  92. width = ta.getBoundingClientRect().width;
  93. $.each(['paddingLeft', 'paddingRight', 'borderLeftWidth', 'borderRightWidth'], function(i,val){
  94. width -= parseInt(style[val],10);
  95. });
  96. mirror.style.width = width + 'px';
  97. }
  98. else {
  99. // window.getComputedStyle, getBoundingClientRect returning a width are unsupported and unneeded in IE8 and lower.
  100. mirror.style.width = Math.max($ta.width(), 0) + 'px';
  101. }
  102. }
  103. function initMirror() {
  104. var styles = {};
  105. mirrored = ta;
  106. mirror.className = options.className;
  107. maxHeight = parseInt($ta.css('maxHeight'), 10);
  108. // mirror is a duplicate textarea located off-screen that
  109. // is automatically updated to contain the same text as the
  110. // original textarea. mirror always has a height of 0.
  111. // This gives a cross-browser supported way getting the actual
  112. // height of the text, through the scrollTop property.
  113. $.each(typographyStyles, function(i,val){
  114. styles[val] = $ta.css(val);
  115. });
  116. $(mirror).css(styles);
  117. setWidth();
  118. // Chrome-specific fix:
  119. // When the textarea y-overflow is hidden, Chrome doesn't reflow the text to account for the space
  120. // made available by removing the scrollbar. This workaround triggers the reflow for Chrome.
  121. if (window.chrome) {
  122. var width = ta.style.width;
  123. ta.style.width = '0px';
  124. var ignore = ta.offsetWidth;
  125. ta.style.width = width;
  126. }
  127. }
  128. // Using mainly bare JS in this function because it is going
  129. // to fire very often while typing, and needs to very efficient.
  130. function adjust() {
  131. var height, original;
  132. if (mirrored !== ta) {
  133. initMirror();
  134. } else {
  135. setWidth();
  136. }
  137. mirror.value = ta.value + options.append;
  138. mirror.style.overflowY = ta.style.overflowY;
  139. original = parseInt(ta.style.height,10);
  140. // Setting scrollTop to zero is needed in IE8 and lower for the next step to be accurately applied
  141. mirror.scrollTop = 0;
  142. mirror.scrollTop = 9e4;
  143. // Using scrollTop rather than scrollHeight because scrollHeight is non-standard and includes padding.
  144. height = mirror.scrollTop;
  145. if (maxHeight && height > maxHeight) {
  146. ta.style.overflowY = 'scroll';
  147. height = maxHeight;
  148. } else {
  149. ta.style.overflowY = 'hidden';
  150. if (height < minHeight) {
  151. height = minHeight;
  152. }
  153. }
  154. height += boxOffset;
  155. if (original !== height) {
  156. ta.style.height = height + 'px';
  157. if (callback) {
  158. options.callback.call(ta,ta);
  159. }
  160. }
  161. }
  162. function resize () {
  163. clearTimeout(timeout);
  164. timeout = setTimeout(function(){
  165. var newWidth = $ta.width();
  166. if (newWidth !== width) {
  167. width = newWidth;
  168. adjust();
  169. }
  170. }, parseInt(options.resizeDelay,10));
  171. }
  172. if ('onpropertychange' in ta) {
  173. if ('oninput' in ta) {
  174. // Detects IE9. IE9 does not fire onpropertychange or oninput for deletions,
  175. // so binding to onkeyup to catch most of those occasions. There is no way that I
  176. // know of to detect something like 'cut' in IE9.
  177. $ta.on('input.autosize keyup.autosize', adjust);
  178. } else {
  179. // IE7 / IE8
  180. $ta.on('propertychange.autosize', function(){
  181. if(event.propertyName === 'value'){
  182. adjust();
  183. }
  184. });
  185. }
  186. } else {
  187. // Modern Browsers
  188. $ta.on('input.autosize', adjust);
  189. }
  190. // Set options.resizeDelay to false if using fixed-width textarea elements.
  191. // Uses a timeout and width check to reduce the amount of times adjust needs to be called after window resize.
  192. if (options.resizeDelay !== false) {
  193. $(window).on('resize.autosize', resize);
  194. }
  195. // Event for manual triggering if needed.
  196. // Should only be needed when the value of the textarea is changed through JavaScript rather than user input.
  197. $ta.on('autosize.resize', adjust);
  198. // Event for manual triggering that also forces the styles to update as well.
  199. // Should only be needed if one of typography styles of the textarea change, and the textarea is already the target of the adjust method.
  200. $ta.on('autosize.resizeIncludeStyle', function() {
  201. mirrored = null;
  202. adjust();
  203. });
  204. $ta.on('autosize.destroy', function(){
  205. mirrored = null;
  206. clearTimeout(timeout);
  207. $(window).off('resize', resize);
  208. $ta
  209. .off('autosize')
  210. .off('.autosize')
  211. .css(originalStyles)
  212. .removeData('autosize');
  213. });
  214. // Call adjust in case the textarea already contains text.
  215. adjust();
  216. });
  217. };
  218. }));