jQuery plugin: autoResize
html代码定义文本框：
<textarea id="test-comment" style="width: 400px; padding: 5px; height: 50px; display: block;">
在这里输入内容，当内容超出文本框高度时，文本框会自动扩展
</textarea>
javascript代码：
<SCRIPT type=text/javascript>
$('textarea#resize').autoResize({
// 文本框改变大小时触发事件，这里改变了文本框透明度
onResize : function() {
$(this).css({opacity:0.8});
},
// 动画效果回调触发事件，这里改变了文本框透明度
animateCallback : function() {
$(this).css({opacity:1});
},
// 动画效果持续时间（ms），默认150
animateDuration : 300,
// 每次改变大小时，扩展（缩小）的高度（像素），默认20
extraSpace : 40,
//当文本框高度大于多少时，不再扩展，出现滚动条，默认1000
limit: 200
});
</script>
或者最简单：
<SCRIPT type=text/javascript>
$('textarea#resize').autoResize();
</script>
例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></SCRIPT>
<SCRIPT type=text/javascript src="autoresize.jquery.js"></SCRIPT>
<style type="text/css">
.autotextarea{
OVERFLOW-Y: hidden;
WIDTH: 500px;
DISPLAY: block;
FONT-FAMILY: Sans-serif;
HEIGHT: 100px;
FONT-SIZE: 1.2em;
OVERFLOW: hidden;
padding: 10px;
}
</style>
</head>
<body>
<textarea id="resize" class="autotextarea" >
Type something in here, when you get close to the end the box will e
</textarea>
<SCRIPT type=text/javascript>
$('textarea#resize').autoResize({
// On resize:
onResize : function() {
$(this).css({opacity:0.8});
},
// After resize:
animateCallback : function() {
$(this).css({opacity:1});
},
// Quite slow animation:
animateDuration : 300,
// More extra space:
extraSpace : 40
});
</script>
</body>
</html>
引用js:
/*
* jQuery autoResize (textarea auto-resizer)
* @copyright James Padolsey http://james.padolsey.com
* @version 1.04
*/
(function ($) {
$.fn.autoResize = function (options) {
// Just some abstracted details,
// to make plugin users happy:
var settings = $.extend({
onResize: function () {},
animate: true,
animateDuration: 150,
animateCallback: function () {},
extraSpace: 20,
limit: 1000
},
options);
// Only textarea's auto-resize:
this.filter('textarea').each(function () {
// Get rid of scrollbars and disable WebKit resizing:
var textarea = $(this).css({
resize: 'none',
'overflow-y': 'hidden'
}),
// Cache original height, for use later:
origHeight = textarea.height(),
// Need clone of textarea, hidden off screen:
clone = (function () {
// Properties which may effect space taken up by chracters:
var props = ['height', 'width', 'lineHeight', 'textDecoration', 'letterSpacing'],
propOb = {};
// Create object of styles to apply:
$.each(props, function (i, prop) {
propOb[prop] = textarea.css(prop);
});
// Clone the actual textarea removing unique properties
// and insert before original textarea:
return textarea.clone().removeAttr('id').removeAttr('name').css({
position: 'absolute',
top: 0,
left: -9999
}).css(propOb).attr('tabIndex', '-1').insertBefore(textarea);
})(),
lastScrollTop = null,
updateSize = function () {
// Prepare the clone:
clone.height(0).val($(this).val()).scrollTop(10000);
// Find the height of text:
var scrollTop = Math.max(clone.scrollTop(), origHeight) + settings.extraSpace,
toChange = $(this).add(clone);
// Don't do anything if scrollTip hasen't changed:
if (lastScrollTop === scrollTop) {
return;
}
lastScrollTop = scrollTop;
// Check for limit:
if (scrollTop >= settings.limit) {
$(this).css('overflow-y', '');
return;
}
// Fire off callback:
settings.onResize.call(this);
// Either animate or directly apply height:
settings.animate && textarea.css('display') === 'block' ? toChange.stop().animate({
height: scrollTop
},
settings.animateDuration, settings.animateCallback) : toChange.height(scrollTop);
};
// Bind namespaced handlers to appropriate events:
textarea.unbind('.dynSiz').bind('keyup.dynSiz', updateSize).bind('keydown.dynSiz', updateSize).bind('change.dynSiz', updateSize);
});
// Chain:
return this;
};
})(jQuery);
官方：http://james.padolsey.com/javascript/jquery-plugin-autoresize/
