Jquery implémente la hauteur adaptative de la zone de texte en fonction du texte content_jquery

Un détail que nous pouvons remarquer en jouant à Weibo est que la hauteur de la zone de texte par défaut qui vous est fournie par Sina Weibo ou Tencent Weibo lors du transfert et des commentaires n'est pas très élevée. Cela peut être dû à la mise en page. lié au fait que les utilisateurs ne republient ou commentent généralement qu'une courte phrase. Mais lorsque vous saisissez plus d'une ligne de texte, la hauteur de la zone de texte est automatiquement augmentée, ce qui améliore considérablement l'expérience afin que les utilisateurs puissent voir tout le texte. Pas besoin de faire glisser la barre de défilement de la zone de texte.

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

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il pourra aider tout le monde à apprendre jQuery.