动态增加文本框高度？ [复制]

Posted 2023-04-18

【中文标题】动态增加文本框高度？ [复制]

【英文标题】：Dynamically increasing textbox height? [duplicate]

【发布时间】：2011-05-24 06:00:27

【问题描述】：

可能重复：Autosizing Textarea

大家好，我正在尝试解决一个问题，但完全没有解决问题。我要做的是在用户文本超出其宽度时动态更改输入框的高度（类似于 Facebook 的状态更新文本框）。

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

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

【参考方案1】：

您可以使用 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>

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

【讨论】：

我用它来根据 div 改变输入文件的大小 :) 非常感谢

【参考方案2】：

要让textarea 伸展，试试这个 (jQuery)：http://www.unwrongest.com/projects/elastic/。

至于一行的高度，你可以试试<textarea>标签中的rows="1"，以及去掉CSS样式。但是，有些浏览器可能会将文本区域的最小高度设置为多于一行。

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

希望这会有所帮助，

詹姆斯

【讨论】：

这很好用。感谢您的链接！

@itsmatt 没问题。很高兴这个旧答案帮助了某人。