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

Question

我有一个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> 

Answer 1

您可以使用此简单的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> 

Answer 2

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

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

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

但是，如果要将值作为表单的一部分提交，则必须自己使用JavaScript进行提交，但这相对容易。 您可以添加一个隐藏字段，并将span值分配给表单的onsubmit事件中的隐藏字段。 隐藏的字段将随表格一起提交。