http://lab.berkerpeksag.com/jGrow

What is jGrow?

jGrow is a jQuery plug-in that makes the textarea adjust its size according to the length of the text.

It works smoothly with jQuery 1.2.x. It was tested on IE6/7, Firefox 2.0.x and Opera 9.x, and no bug was spotted yet.

非常好一个jQuery插件, 但原版不支持 Ctrl + V 的键盘操作事件, 直接代码.

 /* 原版代码.
 * jGrow 0.2
 * 08.02.2008
 * 0.2 release: 04.03.2008
 */
 
 (function($) {

  $.fn.jGrow = function(options) {

   var opts = $.extend({}, $.fn.jGrow.defaults, options);

   return this.each(function() {

    $(this).css({ overflow: "hidden" }).bind("keypress", function() {

     $this = $(this);

     var o = $.meta ? $.extend({}, opts, $this.data()) : opts;

     if(o.rows == 0 && (this.scrollHeight > this.clientHeight)) {
      
      this.rows += 1;
      
     } else if((this.rows <= o.rows) && (this.scrollHeight > this.clientHeight)) {

      this.rows += 1;

     } else if(o.rows != 0 && this.rows > o.rows) {

      $this.css({ overflow: "auto" });

     }

     $this.html();

    });

   });

  }

  $.fn.jGrow.defaults = { rows: 0 };

 })(jQuery);

以下为改进后的代码, 支持 Ctrl+V 键盘事件操作

 /*
 * jGrow 0.2
 * 08.02.2008
 * 0.2 release: 04.03.2008
 */
 
 // Updated by S.Sams 2008-07-24 21:47 以兼容Ctrl+V的操作
 
 (function($) {

  $.fn.jGrow = function(options) {

   var opts = $.extend({}, $.fn.jGrow.defaults, options);

   return this.each(function() {
   
    var isCtrl = false;
    
    $(this).css({ overflow: "hidden" }).bind("keypress", function() {
    
        $this = $(this);
       
     var o = $.meta ? $.extend({}, opts, $this.data()) : opts;

     if(o.rows == 0 && (this.scrollHeight > this.clientHeight)) {
      
      this.rows += 1;
      
     } else if((this.rows <= o.rows) && (this.scrollHeight > this.clientHeight)) {

      this.rows += 1;

     } else if(o.rows != 0 && this.rows > o.rows) {

      $this.css({ overflow: "auto" });

     }

     $this.html();

    }).bind("keydown",function(event){
    
        if(event.keyCode == 17) isCtrl = true;
          
    }).bind("keyup",function(event){

        if(isCtrl && event.keyCode == 86)
        {
         var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
            var getCL = this.value.split('\n').length
         if( getCL <= o.rows)
         {
             this.rows = getCL;
         }
         else
         {
             this.rows = o.rows;
             $(this).css({ overflow: "auto" });
         }
         isCtrl = false;
     }
    });

   });

  }

  $.fn.jGrow.defaults = { rows: 0 };

 })(jQuery);

 // 自适应 textarea 有内容存在的高度自动调整

 /*
 * jGrow 0.2
 * 08.02.2008
 * 0.2 release: 04.03.2008
 */

 // Updated by S.Sams 2008-07-24 21:47 以兼容Ctrl+V的操作

 (function($) {

  $.fn.jGrow = function(options) {

   var opts = $.extend({}, $.fn.jGrow.defaults, options);

   return this.each(function() {

    var isCtrl = false;

    $(this).css({ overflow: "hidden" }).bind("keypress", function() {

        $this = $(this);

     var o = $.meta ? $.extend({}, opts, $this.data()) : opts;

     if(o.rows == 0 && (this.scrollHeight > this.clientHeight)) {

      this.rows += 1;

     } else if((this.rows <= o.rows) && (this.scrollHeight > this.clientHeight)) {

      this.rows += 1;

     } else if(o.rows != 0 && this.rows > o.rows) {

      $this.css({ overflow: "auto" });

     }

     $this.html();

    }).bind("keydown",function(event){

        if(event.keyCode == 17) isCtrl = true;

    }).bind("keyup",function(event){

        if(isCtrl && event.keyCode == 86)
        {
         var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
            var getCL = this.value.split('\n').length
         if( getCL <= o.rows)
         {
             if(getCL > parseInt(this.rows))
                 this.rows = getCL;
         }
         else
         {
             this.rows = o.rows;
             $(this).css({ overflow: "auto" });
         }
         isCtrl = false;
     }
    });

    // Updated by S.Sams 2008-07-25
    // 修正 testarea 有内容存在的情况下的自动调整高度
    if($(this).val().length > 0)
    {
     var o = $.meta ? $.extend({}, opts, $(this).data()) : opts;
     var getCL = this.value.split('\n').length
     if( getCL <= o.rows)
     {
      if(getCL > parseInt(this.rows))
       this.rows = getCL;
     }
     else
     {
      this.rows = o.rows;
      $(this).css({ overflow: "auto" });
     }
    }

   });

  }

  $.fn.jGrow.defaults = { rows: 0 };

 })(jQuery);