Textarea自适应文字内容调整高度

Textarea自适应文字内容调整高度

在Textarea标签的使用中,相信大家都遇到过,当内容很多的时候,textarea就会产生一个滚动条,从数据展示来看,很不清晰,但是有不能直接把textarea高度设置得很大,一旦写死,要不是页面不协调就是内容展示不清晰,那么我们想要的是,textarea的高度能够随着内容 的多少来自动调节;

下面附上代码,望相互学习;

 1 //Textarea自适应文字内容调整高度;
 2 (function($){
 3       $.fn.autoTextarea = function(options) {
 4         var defaults={
 5           maxHeight:null,
 6           minHeight:$(this).height()
 7         };
 8         var opts = $.extend({},defaults,options);
 9         return $(this).each(function() {
10           $(this).bind("paste cut keydown keyup focus",function(){
11             var height,style=this.style;
12             this.style.height = opts.minHeight + 'px';
13             if (this.scrollHeight > opts.minHeight) {
14               if (opts.maxHeight && this.scrollHeight > opts.maxHeight) {
15                 height = opts.maxHeight;
16                 style.overflowY = 'scroll';
17               } else {
18                 height = this.scrollHeight;
19                 style.overflowY = 'hidden';
20               }
21               style.height = height + 'px';
22             }
23           });
24         });
25       };
26     })(jQuery);

使用时:

$(function(){
  $("#content").autoTextarea({
    maxHeight:500,
    minHeight:100//文本框是否自动撑高,默认:null,不自动撑高;如果自动撑高必须输入数值,该值作为文本框自动撑高的最大高度
  });
  $("#content").focus();
});

如有帮助,不胜荣幸;

posted @ 2017-02-07 09:49  赤恩吉烨  阅读(1161)  评论(1编辑  收藏  举报