Question

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

我如何实现这样的目标？

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

使用textarea上的max-width CSS属性，＃textDiv并将 white-space：pre 更改为 white-space：pre-wrap

Answer 2

http://www.jacklmoore.com/autosize

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

动态输入文本后自动调整textarea字段

2 个答案: