jQuery autoResize

这是一个用jQuery实现的, 自动调整textarea高度, 非常的好!
但原作者已经把它的相关描述页面移除了, 这里做个备份吧~
但js路径还在:
full: http://james.padolsey.com/demos/plugins/jQuery/autoresize.jquery.js
minified: http://james.padolsey.com/demos/plugins/jQuery/autoresize.jquery.min.js
原文路径: http://james.padolsey.com/javascript/jquery-plugin-autoresize/ (现在是404)

Usage:
The following options are available:
onResize - (type: Function) - A callback function fired every time the textarea is resized. Within the function 'this' refers to the textarea being resized.
animate - (type: Boolean) - If set to false no animation will take place, the height will immediately change when necessary. By default it's set to true.
animateDuration - (type: Number) - Millisecond duration of animation, by default it's set to 150.
animateCallback - (type: Function) - A callback function fired every time an animation completes. Note: not the same as the onResize callback.
extraSpace - (type: Number) - A pixel value to be added to the total necessary height when applied to the textarea. By default it's set to 20. The idea behind this is to reassure users that they have more space to continue writing.
limit - (type: Number) - Once the textarea reaches this height it will stop expanding. By default it's set to 1000.

The textarea will expand when required until the limit is reached, at which time it brings back the scrollbar. If you were to then delete all the contents of the textarea it would only return to it's original size (no smaller). Also note that, even if you set 'animate' to true, the animation will only occur if the element is set to display:block; in the CSS.

 

$('textarea#comment').autoResize({
    // On resize:
    onResize : function() {
        $(this).css({opacity:0.8});
    },
    // After resize:
    animateCallback : function() {
        $(this).css({opacity:1});
    },
    // Quite slow animation:
    animateDuration : 300,
    // More extra space:
    extraSpace : 40
});

/*
 * jQuery autoResize (textarea auto-resizer)
 * @copyright James Padolsey http://james.padolsey.com
 * @version 1.04
 */

(function($){

$.fn.autoResize = function(options) {

  // Just some abstracted details,
  // to make plugin users happy:
  var settings = $.extend({
    onResize : function(){},
    animate : true,
    animateDuration : 150,
    animateCallback : function(){},
    extraSpace : 20,
    limit: 1000
  }, options);

  // Only textarea's auto-resize:
  this.filter('textarea').each(function(){

    // Get rid of scrollbars and disable WebKit resizing:
    var textarea = $(this).css({resize:'none','overflow-y':'hidden'}),

    // Cache original height, for use later:
    origHeight = textarea.height(),

    // Need clone of textarea, hidden off screen:
    clone = (function(){

      // Properties which may effect space taken up by chracters:
      var props = ['height','width','lineHeight','textDecoration','letterSpacing'],
      propOb = {};

      // Create object of styles to apply:
      $.each(props, function(i, prop){
        propOb[prop] = textarea.css(prop);
      });

      // Clone the actual textarea removing unique properties
      // and insert before original textarea:
      return textarea.clone().removeAttr('id').removeAttr('name').css({
        position: 'absolute',
        top: 0,
        left: -9999
      }).css(propOb).attr('tabIndex','-1').insertBefore(textarea);

    })(),
    lastScrollTop = null,
    updateSize = function() {

      // Prepare the clone:
      clone.height(0).val($(this).val()).scrollTop(10000);

      // Find the height of text:
      var scrollTop = Math.max(clone.scrollTop(), origHeight) + settings.extraSpace,
        toChange = $(this).add(clone);

      // Don't do anything if scrollTip hasen't changed:
      if (lastScrollTop === scrollTop) { return; }
      lastScrollTop = scrollTop;

      // Check for limit:
      if ( scrollTop >= settings.limit ) {
        $(this).css('overflow-y','');
        return;
      }
      // Fire off callback:
      settings.onResize.call(this);

      // Either animate or directly apply height:
      settings.animate && textarea.css('display') === 'block' ?
        toChange.stop().animate({height:scrollTop}, settings.animateDuration, settings.animateCallback)
        : toChange.height(scrollTop);
    };

    // Bind namespaced handlers to appropriate events:
    textarea
      .unbind('.dynSiz')
      .bind('keyup.dynSiz', updateSize)
      .bind('keydown.dynSiz', updateSize)
      .bind('change.dynSiz', updateSize);

  });

  // Chain:
  return this;

  };

})(jQuery);

 

此插件在行数少时, 比如一两行, 回车时, 第一行会有抖动的现象, 下边的有所改善:
我发现了一个更好的: http://www.jacklmoore.com/autosize/