<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