当前位置:Web前端 > javascript> 正文

textarea 高度自适应

时间:2014-6-1类别:Web前端

textarea 高度自适应

textarea 高度自适应

直接上代码 (需要引用 jquery 文件)

  •  
  • HTML 代码   复制
  • 
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title></title>
    
    <style type="text/css">
    .chackTextarea-area{line-height: 20px; font-size: 14px;padding: 0;border: 1px solid #CDCDCD; width: 400px;}
    </style>
    
    <script type="text/javascript" src="Jquery。js"></script>
    
    <script type="text/javascript">
    (function($){
        $.fn.autoTextarea = function(options) {
            var defaults={
                maxHeight:null,
                minHeight:$(this).height()
            };
            var opts = $.extend({},defaults,options);
    
            $(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);
    </script>
    </head>
    <body>
    <li>
        <textarea name="textarea" id="textarea" cols="60" rows="1" class="chackTextarea-area"></textarea>
    </li>   
    <script type="text/javascript">
        $(".chackTextarea-area").autoTextarea({maxHeight:220});
    </script>
    </body>
    </html>
    
    		
  •  

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐