jquery - 如何在随文本增长的输入字段中模拟回车

Question

我有一个带有文本区域输入字段的基本 HTML 表单。

<form action="process.php" method="post">
    <textarea class="text-input" rows="1" cols="20" name="describe_your_project">
        <input type="submit" value="submit" />
    </textarea>
</form>

当用户在输入字段的末尾键入该字段时，我希望 textarea 基本上像回车一样放下一行，而没有显示默认滚动条。

我在 basecamp 和其他程序中看到过这个，但不确定这是 jQuery 函数还是 CSS3 值。任何见解都会很棒。

Answer 1

试试这个:

$('.text-input').bind('input keyup',growme);
function growme() {
    var $this=$(this);
    $this.data('lineheight',$this.data('lineheight')||$this.height());
    if (this.scrollHeight-1>$this.height()) $this.height($this.height()+$this.data('lineheight'));
}

DEMO

或更简单

$('.text-input').bind('input keyup',growme);
function growme() {
    $(this).height(this.scrollHeight);
}