栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

Jquery实现textarea根据文本内容自适应高度

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

Jquery实现textarea根据文本内容自适应高度

在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高,这可能是版面的限制和用户通常只转播或者评论一个短句有关。但是当你输入超过一行文字的时候,文本框的高度就自动撑高了,大大改善了体验,这样用户就可以看到全部的文字。不用再去拖动文本框的滚动条。

autotextarea.js

(function($){
  $.fn.autotextarea = function(options) {
    var defaults={
      maxHeight: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);

demo.js

$(".doctable textarea").autotextarea({
  maxHeight:400,
  minHeight:100
});

以上所述就是本文的全部内容了,希望能够给大家学习jQuery有所帮助。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/103157.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号