textarea自适应高度JQuery插件

其实吧这个效果以前也写过，那个是使用div模拟的这样的话可以不用考虑删除的时候不变化的情况，还有就是复制黏贴的情况，这些不是大家熟悉的事件，这里要使用
onpropertychange和oninput来实现，还有就是当设置了最大高度的时候的问题，我这里实现了Math.min来实现的，省的老判断了，麻烦，封装成了一个jQuery的插件

HTML代码：

<textarea name="" class="area" ></textarea>
<textarea name="" class="area" ></textarea>

JavaScript代码：

首先要引入JQ文件

(function($){
           $.fn.adaptiveTextarea = function(options){
               $.fn.adaptiveTextarea.defaults = {
                   "maxH":99999,
                   "minH":0
               };
               var opts = $.extend({},$.fn.adaptiveTextarea.defaults,options);
               return this.each(function(){
                   var $this = $(this);
                   var defaultH = opts.minH || $this.height();
                   //初始化
                   $this.css({
                       "overflow":"auto",
                       "resize":"none",
                       "height":defaultH + "px"
                   });
                   $this.off("propertychange input").on("propertychange input",function(){
                       this.style.height = defaultH + "px";
                       if(opts.maxH >= opts.minH){
                           this.style.height = Math.min(this.scrollHeight,opts.maxH) + "px";
                       }
                   });
               });
           }
       })(jQuery);
        //调用
        $(function(){
            $(".area").adaptiveTextarea({
                minH:80,
                maxH:300
            });
        });

本文链接：» https://www.csswang.com/exp/4110

转载请注明本文来源出处。