Question

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

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

＆＃13;

    $("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;
      });

＆＃13;

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

＆＃13;

Answer 1

您可以使用这个简单的jQuery代码来实现这一目标。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

如您所见，JavaScript解决方案可能很复杂。您可以使用<span>自动调整其大小，如您所述，并通过添加contenteditable="true"属性使其可编辑：

＆＃13;

div {
  width: 200px;
}

span {
  border: 1px solid #999;
  padding: 3px;
  font-family: Arial;
}

＆＃13;

<div>
  <span contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</div>

＆＃13;

但是，如果您想将值作为表单的一部分提交，那么您必须自己在JavaScript中这样做，但这相对容易。您可以添加隐藏字段，并将span的值分配给表单onsubmit事件中的隐藏字段。隐藏字段随后将与表单一起提交。

如何以正确的大小渲染textarea并在键入时自动扩展？

2 个答案: