gpt4 book ai didi

javascript - 如何制作扩展文本框?

转载 作者:太空狗 更新时间:2023-10-29 14:52:27 25 4
gpt4 key购买 nike

我想制作一本以给定宽度/高度开始的教科书。然后,如果用户键入的空间大于给定的空间量,文本框就会向下扩展。我该怎么做呢?我使用 CSS 吗?当用户传递允许的行数时,基本文本框只显示一个滚动条。我该怎么做才能使文本框再扩展 5 行?

<form method="post" action="">
<textarea name="comments" cols="50" rows="5"></textarea><br>
<input type="submit" value="Submit" />
</form>

如何使用 Robert Harvey 提到的示例?我以前从未使用过 JavaScript..

最佳答案

jQuery 自动调整大小插件
http://james.padolsey.com/javascript/jquery-plugin-autoresize/

使用步骤:

你需要 jQuery。将其添加到您的页面:

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

然后,下载插件并将其放在与您的网页相同的文件夹中。要引用它,请将其添加到您的网页:

<script type="text/javascript"
src="autoresize.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>

最后,在脚本 block 中,添加将插件连接到文本框的代码:

<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>

关于javascript - 如何制作扩展文本框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2924655/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com