www/jquery.autosize.js

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