Maison > interface Web > js tutoriel > Jquery implémente la hauteur adaptative de la zone de texte en fonction du texte content_jquery

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

WBOY
Libérer: 2016-05-16 16:05:57
original
1298 Les gens l'ont consulté

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);
Copier après la connexion

demo.js

$(".doctable textarea").autoTextarea({
  maxHeight:400,
  minHeight:100
});
Copier après la connexion

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.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal