Question

假设我有一个普通文本框大小的textarea，当我按Enter或crtl + enter为用户输入新行时，如何使其伸缩。

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

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

以上是我提到的textarea。

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

或者 - 您可以使用具有contenteditable set true的div。

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

然后将JS函数添加到表单submit（假设这是表单），将隐藏输入的值设置为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

我这样使用：

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>

当我按回车键时，如何为textarea扩展新行？

5 个答案: