jQuery插件之autoTextarea文本框根据输入内容自适应高度

对于微博控来说这个特效一定不会陌生,当你发微博,评论,转播的时候文本框会根据你输入的内容自动适应高度。一个不起眼的效果,对用户体验的提示是不可忽视的。其实不管是新浪微博还是腾讯微博,有好多地方值得我们去借鉴的。
代码:

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

用法:

 $(".chackTextarea-area").autoTextarea({
            maxHeight:220,
            minHeight:20
         })

“jQuery插件之autoTextarea文本框根据输入内容自适应高度”的2个回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注