Javascript如何向Textarea中追加带有换行符的文本？

Question

我有一个按钮，用户可以单击它来合并两个文本区域的文本，但是当他们点击它时，第二个文本区域中的文本将添加到第一个文本区域的末尾，因此它将显示为一行。我想在最后一行文本中添加一个换行符，这样追加的文本就在新的一行上显示。

<input type="button" 
       class="copy_submit" 
       value="<< Copy"
       onclick="document.forms['merge_form'].notes1.value += document.forms['merge_form'].notes2.value;" />

- tatty27

---

我们不是漏掉了HTML表单吗？<textarea>等。 - roberrrt-s

Answer 1

使用此代码片段作为样板。首先访问DOM元素的值，然后使用它 - 将其写入文档的某个位置或输入框中。

document.querySelector('button').addEventListener('click', function(){
  var ta1Text = document.getElementById('ta_1').value;
  var ta2Text = document.getElementById('ta_2').value;
  var res = ta1Text + "\n"+ta2Text;
  document.getElementById('ta_3').value = res
});

<textarea id="ta_1">
</textarea>
<textarea id="ta_2">
</textarea>
<textarea id="ta_3">
</textarea>   
<button>Merge</button>

- marmeladze

---

OP似乎正在设置一个form元素子节点的.value，而不是.innerHTML。 - guest271314

谢谢，但这比我需要的多了一点，我代码中缺少的只是一个额外的'\n' +。 - tatty27

@guest271314 我认为重点是访问该值。将其写在某个地方只是为了演示目的。 - marmeladze

@marmeladze OP已经在访问<textarea>元素的.value属性。OP试图将两个textarea元素的.value连接到一个textarea元素中。将"<br>"设为textarea的.value或.innerHTML会将字面文本"<br>"设置为textarea的值。 - guest271314

Answer 2

在属性事件值之前包含换行符.value。

<input type="button" class="copy_submit" onclick="document.forms['merge_form'].notes1.value += '\n' + document.forms['merge_form'].notes2.value;" value="<< Copy" />

- guest271314

---

好的，当它允许我的时候我会接受的。我之前尝试使用"+="而不是"+"，结果导致了一个错误。 - tatty27

Answer 3

您可以使用\n ：

document.forms['merge_form'].notes1.value += '\n'+ document.forms['merge_form'].notes2.value;

希望这有所帮助。

textarea{
  height: 100px;
}

<form name='merge_form'>
  <textarea name="notes1">Textarea 1 content</textarea>

  <input type="button" class="copy_submit" onclick="document.forms['merge_form'].notes1.value += '\n'+ document.forms['merge_form'].notes2.value;" value="<< Copy" />

  <textarea name="notes2">Textarea 2 content</textarea>
</form>

- Zakaria Acharki