<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML lang=en xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Grow a textarea</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<STYLE type=text/css media=screen>* {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
BODY {
FONT-SIZE: 10px; BACKGROUND: #1f1f1f; MARGIN: 0px auto; COLOR: #ffffff; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
A:link {
COLOR: #ffc000; TEXT-DECORATION: none
}
A:visited {
COLOR: #ffc000; TEXT-DECORATION: none
}
A:hover {
COLOR: #ffffff; TEXT-DECORATION: none
}
A:active {
COLOR: #ffffff; TEXT-DECORATION: none
}
:focus {
outline: 0
}
FIELDSET {
BORDER-RIGHT: #888 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #888 1px solid; PADDING-LEFT: 10px; BACKGROUND: #333; LEFT: 180px; PADDING-BOTTOM: 10px; BORDER-LEFT: #888 1px solid; WIDTH: 400px; PADDING-TOP: 10px; BORDER-BOTTOM: #888 1px solid; POSITION: absolute; TOP: 80px
}
.button {
WIDTH: 100%
}
#source {
BORDER-RIGHT: #fff 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 10px; BACKGROUND: #333; LEFT: 10px; PADDING-BOTTOM: 10px; BORDER-LEFT: #fff 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #fff 1px solid; POSITION: absolute; TOP: 80px
}
.tbSizeChanger {
MARGIN-TOP: 3px
}
.tbSizeText {
MARGIN-TOP: 3px; TEXT-ALIGN: right
}
.tbLarger {
BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; FONT-SIZE: 1.3em; MARGIN-LEFT: 3px; BORDER-LEFT: #fff 1px solid; WIDTH: 1.3em; BORDER-BOTTOM: #fff 1px solid; HEIGHT: 1.3em; TEXT-ALIGN: center
}
.tbSmaller {
BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; FONT-SIZE: 1.3em; MARGIN-LEFT: 3px; BORDER-LEFT: #fff 1px solid; WIDTH: 1.3em; BORDER-BOTTOM: #fff 1px solid; HEIGHT: 1.3em; TEXT-ALIGN: center
}
.tbLarger:hover {
BORDER-RIGHT: #888 1px solid; BORDER-TOP: #888 1px solid; BORDER-LEFT: #888 1px solid; BORDER-BOTTOM: #888 1px solid; BACKGROUND-COLOR: #222
}
.tbSmaller:hover {
BORDER-RIGHT: #888 1px solid; BORDER-TOP: #888 1px solid; BORDER-LEFT: #888 1px solid; BORDER-BOTTOM: #888 1px solid; BACKGROUND-COLOR: #222
}
</STYLE>
<SCRIPT src="mootools.v1.1.js"
type=text/javascript></SCRIPT>
<SCRIPT src="resizeTextarea.js"
type=text/javascript></SCRIPT>
<META content="MSHTML 6.00.6000.16587" name=GENERATOR></HEAD>
<BODY>
<H2>Grow a textarea</H2>
<H4>Based on <A href="http://mootools.net/">Mootools</A> 1.1<BR>Just make a
form, and this script will add the ability to resize each textarea...if you want
to</H4>
<DIV id=source><A
href="resizeTextarea.js">view/download source</A>
<BR><BR><STRONG>Requires:</STRONG><BR>Window.DomReady<BR>Fx.Style<BR>Fx.Styles<BR>Fx.Transitions
</DIV>
<FORM action=index.php method=post>
<FIELDSET><LABEL for=boxOne>This is a larger textarea</LABEL><BR><TEXTAREA id=boxOne rows=15 cols=35>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut non metus eget risus auctor varius. Integer in nisl id ligula euismod aliquet. Morbi arcu. Vivamus eu ante. Etiam quis pede. Donec nisl lectus, convallis sit amet, luctus sit amet, viverra eu, lectus. Proin condimentum congue mauris. Suspendisse mattis libero sed tellus. Nulla facilisi. Duis urna massa, consectetuer id, luctus sit amet, rhoncus mollis, pede. Nulla sem. Proin accumsan dolor et magna pulvinar lobortis. Phasellus velit. Cras a lectus.
Donec est risus, hendrerit in, semper ac, sollicitudin a, odio. Fusce viverra dui. Donec est velit, venenatis non, convallis quis, placerat vitae, est. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam adipiscing nonummy purus. Vestibulum ligula metus, nonummy vitae, posuere pretium, ultrices in, leo. Praesent elit massa, aliquet at, porttitor eu, commodo vitae, erat. Vestibulum vel mauris. Duis a ante. Vestibulum neque.</TEXTAREA>
<BR><BR>
<DIV class=fLeft><LABEL for=boxTwo>This is a smaller textarea</LABEL><BR><TEXTAREA id=boxTwo rows=10>Nunc ultrices. Nulla pharetra. In convallis enim at nunc. Suspendisse a eros sit amet leo luctus luctus. Phasellus erat neque, facilisis vitae, eleifend quis, molestie vitae, erat. Praesent molestie nisl commodo arcu.</TEXTAREA>
</DIV>
<DIV class=fRight><LABEL for=boxThree>Don't resize me</LABEL><BR><TEXTAREA class=nogrow id=boxThree rows=6>Nunc ultrices. Nulla pharetra. In convallis enim at nunc. Suspendisse a eros sit amet leo luctus luctus. Phasellus erat neque, facilisis vitae, eleifend quis, molestie vitae, erat. Praesent molestie nisl commodo arcu.</TEXTAREA>
</DIV>
<DIV class=clear></DIV><BR><BR>
</FIELDSET> </FORM></BODY></HTML>
JQuery插件之自增长多行文本框
4星 · 超过85%的资源 需积分: 10 192 浏览量
2008-12-11
23:06:55
上传
评论
收藏 17KB RAR 举报 
grow-textarea.rar （7个子文件） 
grow-textarea jquery-autogrow 
d.html 3KB
jquery.autogrow.js 4KB mootools demo.html 5KB resizeTextarea.js 2KB mootools.v1.1.js 19KB jquery-pretty-comments t.html 439B pretty-comments.js 3KB资源评论
梦里飞花2012-03-28哥们不是说，你这想法是对的，但bug也不少啊。
chrismacong1232012-11-08貌似不是自增长的，有加减按钮。。看来要想让它自增长要自己改了？总之谢谢分享。
