html代码定义文本框：
|
1
2
3
|
<
textarea
id="test-comment" style="width: 400px; padding: 5px; height: 50px; display: block;">
在这里输入内容，当内容超出文本框高度时，文本框会自动扩展
</
textarea
>
|
javascript代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<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>
|
或者最简单：
|
1
2
3
|
<SCRIPT type=text/javascript>
$(
'textarea#resize'
).autoResize();
</script>
|
例子：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<!
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:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
/*
* 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/
本文转自曾祥展博客园博客，原文链接：
http://www.cnblogs.com/zengxiangzhan/archive/2009/11/11/1601324.html
，如需转载请自行联系原作者
