javascript - 如何以正确的大小呈现textarea并在键入时自动扩展？

我有一个textarea，我希望它加载已经存在的值的大小，并在我继续键入时自动扩展。

我发现这两段JavaScript代码可以分别很好地工作，但是当我将它们放在一起时，其中之一就会停止工作。如何将它们绑定在一起？

    $("textarea").height( $("textarea")[0].scrollHeight );

$(document)
      .one("focus.autoExpand", "textarea.autoExpand", function() {
        var savedValue = this.value;
        this.value = "";
        this.baseScrollHeight = this.scrollHeight;
        this.value = savedValue;
      })
      .on("input.autoExpand", "textarea.autoExpand", function() {
        var minRows = this.getAttribute("data-min-rows") | 0,
          rows;
        this.rows = minRows;
        rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 10);
        this.rows = minRows + rows;
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<textarea name="textarea" class="autoExpand" rows='1' data-min-rows='1'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</textarea>

最佳答案

您可以使用此简单的jQuery代码完成此操作。

$('#textarea').on('change keyup keydown paste cut', 'textarea', function () {
        $(this).height(0).height(this.scrollHeight);
    }).find('textarea').change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='textarea'>
<textarea name="textarea" class="autoExpand" rows='1' data-min-rows='1'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</textarea></div>