Jquery实现 TextArea 文本框根据输入内容自动适应高度

原文:http://www.yuzi.me/Share/TextAreaHeight.html

Jquery代码:

(function($){

  $.fn.autoTextarea = function(options) {

    var defaults={

      maxHeight:null,//文本框是否自动撑高,默认:null,不自动撑高;如果自动撑高必须输入数值,该值作为文本框自动撑高的最大高度

      minHeight:$(this).height() //默认最小高度,也就是文本框最初的高度,当内容高度小于这个高度的时候,文本以这个高度显示

    };

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

  return $(this).each(function() {

    $(this).bind("paste cut keydown keyup focus blur",function(){

    var height,style=this.style;

    this.style.height = opts.minHeight + 'px';

    if (this.scrollHeight > opts.minHeight) {

      if (opts.maxHeight && this.scrollHeight > opts.maxHeight) {

        height = opts.maxHeight;

        style.overflowY = 'scroll';

      }

      else {

        height = this.scrollHeight;

        style.overflowY = 'hidden';

      }

      style.height = height + 'px';

     }

    });

   });

 };

})(jQuery);

调用代码:

$("textarea").autoTextarea({

maxHeight:220,//文本框是否自动撑高,默认:null,不自动撑高;如果自动撑高必须输入数值,该值作为文本框自动撑高的最大高度

})

注意:调用代码一定是放textarea后面。

DEMO页面:http://www.yuzi.me/Demo/autoTextArea.html