Question

可能重复：
Autosizing Textarea

大家好，我正在努力解决一个问题并且绝对没有问题。我想要做的是当用户文本溢出它的宽度时动态地改变输入框的高度（有点像Facebook的状态更新文本框）。

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

任何人都知道一个简单的方法吗？：（

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

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

Answer 2

要让textarea伸展，请给它一个（jQuery）：http://www.unwrongest.com/projects/elastic/。

至于一行的高度，您可以在rows="1"标记中尝试<textarea>，以及删除CSS样式。但是，某些浏览器可能会将textarea的最小高度设置为多行。

另一个解决方案是在屏幕上使用div，当用户点击它时，会使浏览器专注于隐藏的文本框。用户键入隐藏文本框，并通过div给出文本框的内容。 JavaScript的。然后棘手的一点是获得闪烁的光标，但你可以在div中使用管道|字符并使其闪烁，尽管这会在你启动时开始变长。我会再次尝试使用textarea： - ）

希望这有帮助，

詹姆斯

动态增加文本框高度？

2 个答案: