Jquery implementiert die adaptive Höhe des Textbereichs entsprechend dem Textinhalt_jquery

Ein Detail, das uns beim Spielen von Weibo auffällt, ist, dass die Höhe des Standardtextfelds, das Ihnen Sina Weibo oder Tencent Weibo beim Weiterleiten und Kommentieren zur Verfügung stellt, nicht sehr hoch ist. Dies kann am Layout liegen Dies hängt damit zusammen, dass Nutzer meist nur einen kurzen Satz reposten oder kommentieren. Wenn Sie jedoch mehr als eine Textzeile eingeben, wird die Höhe des Textfelds automatisch erhöht, was das Erlebnis erheblich verbessert, sodass Benutzer den gesamten Text sehen können. Es ist nicht erforderlich, die Bildlaufleiste des Textfelds zu ziehen.

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
});

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er jedem beim Erlernen von jQuery helfen kann.