您的位置:首页 > Web前端 > JQuery

jquery/js实现文本框根据输入内容input,textarea自适应高度

wokao_wg 2014-06-26 17:27 148 查看
<span style="font-family: Arial, Helvetica, sans-serif;">//<span style="font-family: Simsun; line-height: 28px;">默认的参数</span></span>
<pre name="code" class="javascript"><pre name="code" class="javascript">$(".chackTextarea-area").autoTextarea({
<span>	</span>maxHeight:220,
<span>	</span>minHeight:$(this).height()
})


<pre name="code" class="javascript"><span style="font-family: Arial, Helvetica, sans-serif;">//jquery版</span>


(function($){
$.fn.autoTextarea = function(options) {
var defaults={
maxHeight:null,//文本框是否自动撑高,默认: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);
</pre><pre code_snippet_id="407312" snippet_file_name="blog_20140626_6_7442777" name="code" class="javascript">//js版
autoTextarea(document.getElementById('textarea_id'));
/** 
 * 文本框根据输入内容自适应高度 
 **/
var autoTextarea = function(elem, extra, maxHeight) {
	extra = extra || 20;
	var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window, isOpera = !!window.opera
			&& !!window.opera.toString().indexOf('Opera'), addEvent = function(
			type, callback) {
		elem.addEventListener ? elem.addEventListener(type, callback, false)
				: elem.attachEvent('on' + type, callback);
	}, getStyle = elem.currentStyle ? function(name) {
		var val = elem.currentStyle[name];
		if (name === 'height' && val.search(/px/i) !== 1) {
			var rect = elem.getBoundingClientRect();
			return rect.bottom - rect.top - parseFloat(getStyle('paddingTop'))
					- parseFloat(getStyle('paddingBottom')) + 'px';
		};
		return val;
	} : function(name) {
		return getComputedStyle(elem, null)[name];
	}, minHeight = parseFloat(getStyle('height'));
	elem.style.maxHeight = elem.style.resize = 'none';
	var change = function() {
		var scrollTop, height, padding = 0, style = elem.style;
		if (elem._length === elem.value.length)
			return;
		elem._length = elem.value.length;

		if (!isFirefox && !isOpera) {
			padding = parseInt(getStyle('paddingTop'))
					+ parseInt(getStyle('paddingBottom'));
		}
		;
		scrollTop = document.body.scrollTop
				|| document.documentElement.scrollTop;
		elem.style.height = minHeight + 'px';
		if (elem.scrollHeight > minHeight) {
			if (maxHeight && elem.scrollHeight > maxHeight) {
				height = maxHeight - padding;
				style.overflowY = 'auto';
			} else {
				height = elem.scrollHeight - padding;
				style.overflowY = 'hidden';
			};
			style.height = height + extra + 'px';
			scrollTop += parseInt(style.height) - elem.currHeight;
			document.body.scrollTop = scrollTop;
			document.documentElement.scrollTop = scrollTop;
			elem.currHeight = parseInt(style.height);
		};
	};
	addEvent('propertychange', change);
	addEvent('input', change);
	addEvent('focus', change);
	change();
};

实例

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>auto_input</title>
		<meta name="generator" content="Studio 3 http://aptana.com/"> 		<meta name="author" content="yaoxingda.pt">
		<!-- Date:  2014-06-26 17:58:14-->
		<style type="text/css">
			#container {
				height:auto !important;
				height:20px; /*假定最低高度*/
				min-height:20px; 
			}
		</style>
		<script type="text/javascript">
			var autoTextarea = function(elem, extra, maxHeight) {
			extra = extra || 20;
			var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window, isOpera = !!window.opera
					&& !!window.opera.toString().indexOf('Opera'), addEvent = function(
					type, callback) {
				elem.addEventListener ? elem.addEventListener(type, callback, false)
						: elem.attachEvent('on' + type, callback);
			}, getStyle = elem.currentStyle ? function(name) {
				var val = elem.currentStyle[name];
				if (name === 'height' && val.search(/px/i) !== 1) {
					var rect = elem.getBoundingClientRect();
					return rect.bottom - rect.top - parseFloat(getStyle('paddingTop'))
							- parseFloat(getStyle('paddingBottom')) + 'px';
				};
				return val;
			} : function(name) {
				return getComputedStyle(elem, null)[name];
			}, minHeight = parseFloat(getStyle('height'));
			elem.style.maxHeight = elem.style.resize = 'none';
			var change = function() {
				var scrollTop, height, padding = 0, style = elem.style;
				if (elem._length === elem.value.length)
					return;
				elem._length = elem.value.length;

				if (!isFirefox && !isOpera) {
					padding = parseInt(getStyle('paddingTop'))
							+ parseInt(getStyle('paddingBottom'));
				}
				;
				scrollTop = document.body.scrollTop
						|| document.documentElement.scrollTop;
				elem.style.height = minHeight + 'px';
				if (elem.scrollHeight > minHeight) {
					if (maxHeight && elem.scrollHeight > maxHeight) {
						height = maxHeight - padding;
						style.overflowY = 'auto';
					} else {
						height = elem.scrollHeight - padding;
						style.overflowY = 'hidden';
					};
					style.height = height + extra + 'px';
					scrollTop += parseInt(style.height) - elem.currHeight;
					document.body.scrollTop = scrollTop;
					document.documentElement.scrollTop = scrollTop;
					elem.currHeight = parseInt(style.height);
				};
			};
			addEvent('propertychange', change);
			addEvent('input', change);
			addEvent('focus', change);
			change();
		};
		</script>
	</head>
	<body >
		<div>自适应宽度</div>
		<div> 
			<div id="container"><textarea  id="txtarea_id"></textarea> </div>
			<div>aaaaaaaaaa</div>
			<div>bbbbbbbbbbbbb</div>
		</div>
	</body>
	<script>
		autoTextarea(document.getElementById("txtarea_id"),1);
	</script>
</html>


转载http://www.111cn.net/wy/js-ajax/51867.htm

                                            
标签: