jquery實現textarea 高度自適應

2024-05-06 16:16:27

字體：大中小

來源：轉載

供稿：網友

用jquery實現的textarea 高度自適應代碼。這個動畫效果比較流暢。適合新手學習。非常簡單實用，這里推薦給小伙伴們。

之前給大家分享過用Javascript控制文本框textarea高度隨內容自適應增長收縮，今天花了點時間換了種實現方法，總結一下

復制代碼代碼如下:

		
		jQuery.fn.extend({
		            autoHeight: function(){
		                return this.each(function(){
		                    var $this = jQuery(this);
		                    if( !$this.attr('_initAdjustHeight') ){
		                        $this.attr('_initAdjustHeight', $this.outerHeight());
		                    }
		                    _adjustH(this).on('input', function(){
		                        _adjustH(this);
		                    });
		                });
		                /**
		                 * 重置高度 
		                 * @param {Object} elem
		                 */
		                function _adjustH(elem){
		                    var $obj = jQuery(elem);
		                    return $obj.css({height: $obj.attr('_initAdjustHeight'), 'overflow-y': 'hidden'})
		                            .height( elem.scrollHeight );
		                }
		            }
		        });
		        // 使用
		        $(function(){
		            $('textarea').autoHeight();
		        });