0

私はjavascriptで埋められているを持っています。textareaに挿入されるテキストは動的であり、長さが異なる可能性があるため、javascriptがテキストを入力した後、textareaのサイズを動的に変更する必要があります。textareaの幅を最大にしたいのですが、そのフィールドの場合、テキストは次の行に入力され続け、textareaの高さが大きくなります。

どうすればそのようなことを達成できますか？

4

2 に答える 2

0

多分あなたはこれを試すことができます: 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>

テキストエリアで max-width CSS プロパティ #textDiv を使用し、white-space: preをwhite-space: pre-wrapに変更します。

于 2016-09-14T10:00:32.353 に答える
-1

http://www.jacklmoore.com/autosize

必要なもので、テキストエリア CSS に max-height を追加してください。

于 2012-12-05T16:50:05.723 に答える