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

前端技术 2023/09/01 JavaScript

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

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有所帮助。

本文地址：https://www.stayed.cn/item/1584

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案