Home >Web Front-end >JS Tutorial >Jquery implements textarea adaptive height according to text content_jquery

Jquery implements textarea adaptive height according to text content_jquery

WBOY
WBOYOriginal
2016-05-16 16:05:571319browse

One detail we may notice when playing Weibo is that the height of the default text box given to you by either Sina Weibo or Tencent Weibo when forwarding and commenting is not very high. This may be because of the layout. The limitation is related to the fact that users usually only repost or comment on a short sentence. But when you enter more than one line of text, the height of the text box is automatically raised, which greatly improves the experience so that users can see all the text. No need to drag the scroll bar of the text box.

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

The above is the entire content of this article. I hope it can help everyone learn jQuery.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn