当我按下回车键时，如何为 textarea 扩展一个新行？答案

【问题标题】：How do I expand a new line for textarea when i press enter?当我按下回车键时，如何为 textarea 扩展一个新行？
【发布时间】：2013-08-29 01:36:45
【问题描述】：

假设我有一个普通文本框大小的文本区域，当我按 enter 或 crtl+enter 以创建一个新行供用户输入时，如何使其可拉伸。

例如，我在第一行的 textarea 中输入一些内容，然后按 Enter，textarea 将展开一个新行供我输入数据。

<td>
    <textarea rows="5" cols="50" name="description[]">
        <?php echo $row[ 'description']; ?>
    </textarea>
</td>

上面是我提到的textarea。

【问题讨论】：

标签： html

【解决方案1】：

您必须使用 javascript。具体来说，您可以使用名为 jQuery 的 javascript 框架。看看这个答案：Auto expand a textarea using jQuery

【讨论】：

如果可以使用jQuery完成，则可以使用javascript完成
@dc5 正确。我并不是要暗示 jQuery 本身是必需的。我将编辑我的答案以使其更清楚。
如果可以使用 javascript 完成，那么使用 jQuery 可以在更少的时间/代码行中完成

【解决方案2】：

你可以试试 jQuery：

$("textarea").keyup(function(e) {
    if(e.keyCode == 13) //13 is the ASCII code for ENTER
        {
            var rowCount = $(this).attr("rows");
            $(this).attr({rows: rowCount + 5});
        }
});

【讨论】：

stackoverflow.com/a/5346855/2716915 这对我有用 :) 虽然代码很长，但我想我了解工作流程。谢谢大家 :)

【解决方案3】：

或者 - 您可以使用设置为 true 的 div。

<td>
  <div id="description[]" contenteditable="true">
    <?php echo $row['description']; ?>
  </div>
</td>
<input name="description[]" type="hidden" value="">

然后在表单提交中添加一个JS函数（假设这是一个表单），它将隐藏输入的值设置为div的内部文本/内容

function updateText() {
  content = document.getElementById('description[]').textContent || document.getElementById('description[]').innerText;
  document.querySelector('[name="description[]"]').value = content;
}

【讨论】：

【解决方案4】：

查看这个自动增长的 jQuery 插件 - https://github.com/akaihola/jquery-autogrow

【讨论】：

【解决方案5】：

我是这样用的：

jquery：

$('#parent-block-for-textarea').on('keyup', 'textarea.autoexpand', function(ev) {
        var t = ev.target;
        t.style.height = 'auto';
        t.style.height = (t.scrollHeight) + 'px';
});
//this also works on dynamically added textarea.

HTML：

<textarea class="autoexpand"></textarea>

不使用jquery：

<textarea onkeyup="this.style.height='auto';this.style.height=(this.scrollHeight)+'px'"></textarea>

【讨论】：