Weibo를 플레이할 때 알 수 있는 한 가지 세부 사항은 전달 및 댓글 작성 시 Sina Weibo 또는 Tencent Weibo에서 제공하는 기본 텍스트 상자의 높이가 그다지 높지 않다는 것입니다. 이는 레이아웃 제한 때문일 수 있습니다. 사용자는 일반적으로 짧은 문장에만 다시 게시하거나 댓글을 달 수 있다는 사실과 관련이 있습니다. 하지만 두 줄 이상의 텍스트를 입력하면 텍스트 상자의 높이가 자동으로 높아지므로 사용자가 모든 텍스트를 볼 수 있도록 경험이 크게 향상됩니다. 텍스트 상자의 스크롤 막대를 끌 필요가 없습니다.
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 });
이상 내용이 이 글의 전체 내용입니다. jQuery를 배우는 모든 분들에게 도움이 되었으면 좋겠습니다.