javascript - 动态输入文本后自动调整 textarea 字段的大小

Question

我有一个由javascript填充的。插入到 textarea 的文本是动态的，可以有不同的长度，因此我需要在 javascript 输入文本后动态调整 textarea 的大小。我希望 textarea 具有最大宽度，如果它是字段，则文本将继续填充下一行，导致 textarea 高度增加。

我如何实现这样的事情？

Answer 1

也许你可以试试这个：https ://jsfiddle.net/paulistoan/84ujn5qp/

$(document).ready(function(){
	$("#textArea").on("input", updateText).trigger($.Event("input"));
	
	function updateText()
	{
		$("#textDiv").text($(this).val() + "\n");
		$(this).css("width", $("#textDiv").width()+2);
		$(this).css("height", $("#textDiv").height());
	}
});

textarea {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: medium none;
  color: black;
  outline: medium none;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background-color:lightgray;
  resize: none !important;

  outline-color: inherit;
  outline-style: dashed;
  outline-width: 2px;
}

#textDiv {
  top: 50px;
  background-color:#FF0004;
  display: inline-block;
  white-space: pre;
  display: none;
}

textarea, #textDiv {
  font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
  font-size: 26px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<textarea id="textArea">Lorem ipsum dolor sit amet,&#10;consectetur adipisicing&#10;elit porro quisquam est qui dolorem ipsum</textarea>

<div id="textDiv"></div>

并在 textarea 上使用 max-width CSS 属性，#textDiv 并将white-space: pre更改为white-space: pre-wrap

Answer 2

http://www.jacklmoore.com/autosize

可能是您需要的，并向文本区域 CSS 添加最大高度。