当前位置：文江博客话题详情

动态增加文本框高度？

发布于 2024-10-07 20:58:03 字数 340 浏览 3 评论 0原文

可能的重复：
自动调整文本区域大小

大家好，我正在尝试解决一个问题，但毫无进展。我想做的是当用户文本溢出输入框的宽度时动态更改输入框的高度（有点像 Facebook 的状态更新文本框）。

您输入简短的更新，如果文本比文本框长，则会创建一个新行。我尝试使用文本区域，但无论出于何种原因，默认情况下都不能强制它恰好为 1 行。

有人知道这样做的简单方法吗？ :(

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

蝶…霜飞 2024-10-14 20:58:03

您可以使用 CSS 高度和宽度参数手动控制 textarea 的大小。通过将按键事件绑定到textarea，您可以获取框中的文本量并相应地调整高度。例如，这里有一些 jQuery，每输入 50 个字符，框的高度就会增加 20 个像素：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
</script>

<textarea id="textbox" style="height:20px;width:400px;"></textarea>

<script type="text/javascript">
$(document).ready(function() {
    $("#textbox").val('');
    $("#textbox").keypress(function() {
        var textLength = $("#textbox").val().length;
        if (textLength % 50 == 0) {
            var height = textLength/50;
            $("#textbox").css('height', 20+(height*20));
        }
    });
});
</script>

您可以调整这些值以获得所需的效果。

You can manually control the size of the textarea using the CSS height and width parameters. By binding a keypress event to the textarea, you can get the amount of text in the box and adjust the height accordingly. For example, here's some jQuery that will add 20 pixels to the height of the box for every 50 characters you put in:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
</script>

<textarea id="textbox" style="height:20px;width:400px;"></textarea>

<script type="text/javascript">
$(document).ready(function() {
    $("#textbox").val('');
    $("#textbox").keypress(function() {
        var textLength = $("#textbox").val().length;
        if (textLength % 50 == 0) {
            var height = textLength/50;
            $("#textbox").css('height', 20+(height*20));
        }
    });
});
</script>

You can tweak the values to get the desired effect.

回复收藏 0 原文

潇烟暮雨 2024-10-14 20:58:03

要拉伸 textarea，请尝试一下 (jQuery)： http: //www.unwrongest.com/projects/elastic/。

至于恰好一行的高度，您可以尝试 </code> 标记中的 <code>rows="1"</code> 以及删除 CSS 样式。然而，某些浏览器可能会将文本区域的最小高度设置为多于一行。

另一种解决方案是在屏幕上使用 div，当用户单击它时，使浏览器聚焦在隐藏的文本框上。用户在隐藏的文本框中键入内容，然后 div 就会通过获得文本框的内容。 JavaScript。棘手的一点是获得闪烁的光标，但是您可以在 div 中使用管道 | 字符并使其闪烁，尽管这在您启动它时开始变得冗长。我个人会再次尝试使用文本区域:-)

希望这有帮助，

詹姆斯