使用Javascript实现textarea根据文本内容自动变化高度

以下是使用Javascript实现textarea根据文本内容自动变化高度的示例代码：

<!DOCTYPE html>
<html>
<head>
	<title>Textarea Auto Height</title>
	<style>
		textarea {
			width: 100%;
			padding: 10px;
			font-size: 16px;
			line-height: 1.5;
			border: 1px solid #ccc;
			resize: none;
			overflow: hidden;
		}
	</style>
</head>
<body>
	<textarea id="textarea" placeholder="Type something"></textarea>
	<script>
		var textarea = document.getElementById("textarea");
		textarea.addEventListener("input", function() {
			this.style.height = "auto";
			this.style.height = this.scrollHeight + "px";
		});
	</script>
</body>
</html>

首先，我们定义了一个textarea元素，并使用CSS设置了其样式。注意，我们将其overflow属性设置为hidden，这是为了防止文本溢出textarea的边界。

然后，在Javascript中，我们获取了textarea元素的引用，并添加了一个input事件监听器。每当用户输入文本时，该事件监听器会触发。

在事件处理程序中，我们首先将textarea的高度设置为auto，这是为了使其返回到默认高度。然后，我们获取textarea的scrollHeight属性，该属性表示textarea的内容所需的高度。最后，我们将textarea的高度设置为scrollHeight的值，以自动调整其高度。

这样，当用户输入文本时，textarea的高度就会自动调整，以适应其内容。