如何创建扩展文本框？ [英] How do I make an expanding textbox?

问题描述

我想制作一本教科书，它以一个给定的宽度/高度开始。然后，如果用户键入的空间大于给定的空间，则文本框向下扩展。我该怎么做呢？我使用CSS？
当用户通过允许的行数时，基本的文本框只显示一个滚动条。

I want to make a textbook where it starts out as a given width/height. Then if users type more then the given amount of space, the textbox expands downward. How do I go about doing this? Do I use CSS? The basic textbox just displays a scroll bar when users pass the number of rows allow. How do I make it so the textbox expands the rows by say 5 more?

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

如何使用Robert Harvey提到的示例？我从未使用过JavaScript。

How do I use the example that Robert Harvey mentioned? I never used JavaScript before..

推荐答案

jQuery AutoResize插件

< a href =http://james.padolsey.com/javascript/jquery-plugin-autoresize/ =nofollow noreferrer> http://james.padolsey.com/javascript/jquery-plugin-autoresize/ a>

使用步骤：

要将其添加到您的网页：

You need jQuery. To add it to your page:

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

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

Then, download the plugin and put it in the same folder as your web page. To reference it, add this to your web page:

<script type="text/javascript"
    src="autoresize.jquery.js"></script>

接下来，在您的网页上添加一个文本框：

Next, add a textbox to your page:

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

最后，在脚本块中，添加将插件挂接到文本框的代码：

Finally, in a script block, add the code that hooks up the plugin to the textbox:

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

这篇关于如何创建扩展文本框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！