用文本增加 textarea 的高度

Question

textarea 在插入文本时可以调整它的高度吗？

我想隐藏 textarea 的边框，以便用户感觉他们在无限空间中输入。

（当新行开始时，textarea 的高度应增加一行的高度）

我猜的一种方法是；在每次击键时将所有文本复制到具有相同宽度的 div 中，然后测量 div 的高度，然后为 textarea 设置 div 的高度。

我注意到的一个问题是，滚动条宽度应该从主宽度中减去，在不同的设备上，我们有 0 到 16px 的可变滚动条宽度......，有什么建议吗？

Answer 1

您可以使用elastic.js轻松实现您想要做的事情，这是一个简单的单行解决方案。

$('#note').elastic();

textarea#note {
	width:100%;
	display:block;
	resize: none;
	border: none;
}
textarea:focus {
	outline: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://jquery-elastic.googlecode.com/svn-history/r37/trunk/jquery.elastic.js"></script>
<textarea id="note">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</textarea>