Home > Web Front-end > JS Tutorial > body text

Jquery implements textarea adaptive height according to text content_jquery

WBOY
Release: 2016-05-16 16:05:57
Original
1284 people have browsed it

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);
Copy after login

demo.js

$(".doctable textarea").autoTextarea({
  maxHeight:400,
  minHeight:100
});
Copy after login

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

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template