jquery.autosize.js 8.2 KB

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