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'));
}

演示

或更简单

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

Answer 2

感谢楼上大家的帖子。我尝试了上面的几个选项，不同的浏览器表现不同（Chrome 上面的选项有问题）。我做了更多的研究，发现了这个：

https://github.com/jevin/Autogrow-Textarea

希望它对将来的某人有所帮助...感谢您为我指明正确的方向！