textarea行数自适应

要实现textarea行数自适应，可以使用以下方法：

1. 使用JavaScript监听textarea的输入事件，并在每次输入后重新计算textarea的高度。

2. 在计算高度时，可以使用textarea的scrollHeight属性获取实际内容的高度，然后设置textarea的高度为实际内容高度。

3. 在初始化时，需要设置textarea的高度为auto，这样可以让它根据内容自动调整高度。

以下是一个示例代码：

<textarea id="textarea" style="height: auto;"></textarea>

const textarea = document.getElementById('textarea');

textarea.addEventListener('input', () => {
  textarea.style.height = 'auto';
  textarea.style.height = `${textarea.scrollHeight}px`;
});

这样，每次输入后，textarea的高度都会自动调整为实际内容的高度。

相关问题

textarea行数自适应代码

以下是使用JavaScript实现textarea行数自适应的示例代码：

<textarea id="myTextarea" oninput="autoResize()" placeholder="输入内容"></textarea>

function autoResize() {
  const textarea = document.getElementById("myTextarea");
  textarea.style.height = "auto";
  textarea.style.height = textarea.scrollHeight + "px";
}

在这个示例中，我们首先在HTML中定义了一个textarea元素，并为其指定ID和占位符文本。然后，在JavaScript中我们定义了一个名为`autoResize`的函数，该函数会在textarea的输入事件触发时被调用。在该函数中，我们首先获取textarea元素的引用，然后将其高度设置为`auto`，以便在测量其内容尺寸之前将其重置为默认高度。接下来，我们将textarea的高度设置为其内容高度加上一个像素，以便在多行文本的情况下正确展示所有文本。

需要注意的是，这个示例中的代码只适用于单个textarea元素，并且如果你需要在网页中使用多个textarea元素时，你需要对每个元素都复制并修改这些代码。

首次加载textarea行数自适应代码

以下是一个简单的textarea行数自适应代码：

<textarea id="textarea" oninput="autoResize()" style="overflow:hidden"></textarea>

function autoResize() {
  const textarea = document.getElementById("textarea");
  textarea.style.height = "auto";
  textarea.style.height = textarea.scrollHeight + "px";
}

这个代码会在页面加载时首次自适应textarea的行数，并且在用户输入时动态调整。其中，`oninput`事件会在用户输入时触发，`textarea.scrollHeight`会返回textarea实际内容的高度，通过调整`textarea.style.height`来实现自适应。`style="overflow:hidden"`可以防止textarea出现滚动条。