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.