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

Question

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

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

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

以上是我提到的文本区域。

Answer 1

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

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

Answer 3

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

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

Answer 4

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

Answer 5

我是这样使用的：

查询：

$('#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>