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

Answer 2

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

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

希望将来帮助某人......感谢你指点我正确的方向！

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

2 个答案: