HTML Textarea 自动高度到文本量

HTML的标签是用来创建一个多行文本输入框的，但是它的高度是默认的，无法根据文本的数量自动调整。为了解决这个问题，我们可以通过一些技巧让<textarea>标签自动高度到文本量。

使用Javascript实现自动高度

方式一：通过计算文本数量

首先，我们需要给标签绑定一个oninput事件，每当文本发生变化时，计算文本的数量，并根据数量来改变<textarea>标签的高度。

<textarea oninput="autoHeight(this)"></textarea>

function autoHeight(textarea) {
  textarea.style.height = "auto";
  textarea.style.height = textarea.scrollHeight + "px";
}

在这个例子中，我们使用了textarea.scrollHeight属性来获取标签实际的高度，并将其赋值给<textarea>标签的style.height属性。注意，我们需要先将style.height属性设置为"auto"，这样才能让<textarea>标签的高度自适应。

方式二：通过调整行高

另一种实现方式是调整行高，这样可以让标签的高度根据文本行数自动适应。

<textarea oninput="autoHeight(this)"></textarea>

function autoHeight(textarea) {
  textarea.style.height = "auto";
  textarea.style.height = textarea.scrollHeight + "px";
  textarea.style.lineHeight = "1.5";
}

在这个例子中，我们除了使用textarea.scrollHeight属性外，还将textarea.style.lineHeight属性设置为"1.5"，这样可以让文本的行间距更加舒适。

使用CSS实现自动高度

除了使用Javascript，我们还可以使用CSS来实现标签的自动高度。

<textarea></textarea>

textarea {
  resize: none;
  overflow: hidden;
  height: auto;
  min-height: 50px;
}

在这个例子中，我们使用了CSS中的resize属性，将其设置为"none"，这样可以禁止用户拖动标签的大小。同时，我们还将overflow属性设置为"hidden"，这样可以让<textarea>标签的高度自适应。最后，我们还设置了textarea的min-height属性，这样可以保证<textarea>标签至少有50px的高度。

总结

通过使用上述技巧，我们可以让标签根据文本数量自动高度。这样可以提高用户的输入体验，并让界面更加美观。我们可以根据项目需求选择适合自己的实现方式。