Javascript 如何制作扩展文本框？
我想制作一本教科书，从给定的宽度/高度开始。然后，如果用户键入的空间大于给定的空间量，文本框将向下扩展。我该怎么做呢？我使用CSS吗？ 当用户通过允许的行数时，“基本”文本框仅显示一个滚动条。如何使文本框将行再扩展5行Javascript 如何制作扩展文本框？,javascript,html,css,Javascript,Html,Css,我想制作一本教科书，从给定的宽度/高度开始。然后，如果用户键入的空间大于给定的空间量，文本框将向下扩展。我该怎么做呢？我使用CSS吗？ 当用户通过允许的行数时，“基本”文本框仅显示一个滚动条。如何使文本框将行再扩展5行 <form method="post" action=""> <textarea name="comments" cols="50" rows="5"></textarea><br> <input type="submit"
<form method="post" action="">
<textarea name="comments" cols="50" rows="5"></textarea><br>
<input type="submit" value="Submit" />
</form>
我如何使用罗伯特·哈维提到的例子？我以前从未使用过JavaScript。jQuery自动调整插件大小
使用步骤： 您需要jQuery。要将其添加到您的页面，请执行以下操作：
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<textarea id="comment" style="width: 400px; padding: 10px; height: 50px;
display: block; font-family:Sans-serif; font-size:1.2em;">
Type something in here, when you get close to the end the box will expand!
</textarea>
<script type="text/javascript"
src="autoresize.jquery.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<textarea id="comment" style="width: 400px; padding: 10px; height: 50px;
display: block; font-family:Sans-serif; font-size:1.2em;">
Type something in here, when you get close to the end the box will expand!
</textarea>
在这里输入一些东西，当你接近尾端时，框会展开！
<script type="text/javascript">
$('textarea#comment').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>
$（'textarea#comment'）。自动调整大小({
//调整大小时：
onResize:function（）{
$（this.css（{opacity:0.8}）；
},
//调整大小后：
animateCallback:function（）{
$（this.css（{opacity:1}）；
},
//相当慢的动画：
动画教育：300，
//更多额外空间：
外部空间：40
});
<!doctype html>
<html lang= "en">
<head>
<meta charset= "utf-8">
<title>Expand textarea </title>
<style>
textarea{overflow-y:scroll}
</style>
<script>
onload=function(){
var who=document.getElementsByName('comments')[0];
who.onkeyup=function(){
if(who.scrollTop)who.rows=parseInt(who.rows)+5;
}
}
</script>
</head>
<body>
<textarea name="comments" cols="50" rows="5"></textarea>
</body>
</html>
扩展文本区域
text区域{overflow-y:scroll}
onload=函数（）{
var who=document.getElementsByName（'comments'）[0]；
who.onkeyup=function（）{
if（who.scrollTop）who.rows=parseInt（who.rows）+5；
}
}
测试可在Chrome、Firefox和IE8及以上版本中使用 加载，或在函数中对其进行重击：
var-element=document.getElementById（'comments'）；
var自动地=假；
var sizeOfOne=element.clientHeight；
element.rows=2；
var sizeOfExtra=element.clientHeight-sizeOfOne；
element.rows=1；
var resize=function（）{
变量长度=元素高度；
如果（自动缩回）{
if（element.clientHeight==长度）
返回；
}
否则{
element.rows=1；
长度=元素高度；
}
element.rows=1+（长度-sizeOfOne）/sizeOfExtra；
};
//现代的
if（element.addEventListener）
元素。addEventListener（'input'，resize，false）；
//IE8
否则{
元素.attachEvent（'onpropertychange'，调整大小）
自动收回=真；
}
textarea#注释{溢出：隐藏；}