在Javascript追加内容后，Textarea不会根据预填值自动增长高度。

Question

我正在开发Spring应用程序。我想将预填值设置到文本区域并向用户显示。我需要该文本区域能够显示多行，高度根据内容自适应。

我尝试了一些从网上找到的脚本，但没有成功。

为了理解我的目标，我创建了示例代码。

function submit() {
  $("#text").remove();
  let data = `<textarea id="text" rows="1">asdaaaaaaa
  asddas
  asasd
  assd
  daasd
  dsasd
  sdasd
  asdasd</textarea>`
  $("#banner-message").append(data);
}

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <div><button type="button" onclick="submit()">Click Me!</button></div>
</div>

我希望元素在使用jQuery追加内容后能够自动调整高度以适应内容。

- laughing

---

你不能只是简单地添加 rows='8' 而不是 rows='1' 吗？或者这个值总是会动态变化的吗？ - Calvin Nunes

Answer 1

在Calvin Nunes的评论中补充一下，您可以尝试像这样做（在附加节点之后）。

function submit() {
  $("#text").remove();
  let data = `<textarea id="text" rows="1">asdaaaaaaa
  asddas
  asasd
  assd
  daasd
  dsasd
  sdasd
  asdasd</textarea>`
  $("#banner-message").append(data);
  // count number of lines in text's value
  var numRows = ($("#text").val().match(/\n/g) || []).length + 1;
  $("#text").attr("rows", numRows);
}

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <div><button type="button" onclick="submit()">Click Me!</button></div>
</div>

- Ambarish Chaudhari

---

我尝试了你的解决方案，但最终发现rows属性似乎并没有改变textarea元素的高度。我有什么遗漏吗？ - laughing

@laughing 更新了解决方案的片段，您可以尝试运行该片段并进行测试。 - Ambarish Chaudhari

Answer 2

你可以做的最好的事情是动态创建一个文本区域，使用jQuery更容易。检查换行符并将相应的行数分配给文本区域。

function submit() {
  $("#text").remove();
  let data = `asdaaaaaaa
  asddas
  asasd
  assd
  daasd
  dsasd
  sdasd
  asdasd`
  let textarea = $(document.createElement("textarea")), // new element of textarea
    matches = data.match(/\n/g), // match the line breaks from data
    breaks = matches ? matches.length : 2; // get the length or return 2
  textarea.val(data) // append the value to the textarea
  textarea.attr('rows', breaks + 2); // assign the attribute to the texarea
  textarea.attr('id', "text"); // assign the id to textarea
  $("#banner-message").append(textarea); // append the textare to the div
}

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <div><button type="button" onclick="submit()">Click Me!</button></div>
</div>

- weegee

---

还有其他选项吗？因为我在循环中添加了许多元素，以及样式类和动态ID。 - laughing

这是循环中最好的选择。你应该使用react.js来实现。 - weegee

Answer 3

解决方法是，我使用JavaScript设置定时器重新加载内容。

JavaScript加载的内容无法正常工作的原因是HTML尚未加载，因此在HTML加载后使用定时器从JavaScript重新加载内容，它将正常工作。您可以尝试将持续时间缩短到所需的低水平并测试其是否有效。

- laughing