textarea文本域自适应高度[自动增加高度] 博客分类： js 开发Jquerycss textarea文本域自适应高度[自动增加高度]

textarea文本域自适应高度[自动增加高度]

在作为留言或者其他的网站备注的地方都是用的textarea，但是当文字多过其高度的时候，前面的文字就被顶到上面去了，要看内容还要翻上去。

当有了这个就不需要了，因为他会自动增加高度，适应当前的文字高度。

方法其实很简单，建议以后模板的作者可以加上。

1.引入Jquery.

<script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>

2.引入初始css.

body { background:#fff; }
textarea {width:300px; min-height:60px; overflow:hidden;}

3.加入自适应的JS

$.fn.autoHeight = function(){
	
	function autoHeight(elem){
		elem.style.height = 'auto';
		elem.scrollTop = 0; //防抖动
		elem.style.height = elem.scrollHeight + 'px';
	}
	
	this.each(function(){
		autoHeight(this);
		$(this).on('keyup', function(){
			autoHeight(this);
		});
	});

}
	
	
$('textarea[autoHeight]').autoHeight();

4.加入textarea

<div><textarea autoHeight="true">textarea</textarea></div>