javascript - 动态增加文本框高度？

Question

Possible Duplicate:
Autosizing Textarea

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

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

有人知道一个简单的方法吗？ :(

Answer 1

您可以使用 CSS 高度和宽度参数手动控制 textarea 的大小。通过将按键事件绑定(bind)到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>

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