如何在文本区域中键入内容并将该文本添加到内容可编辑的 div 中？

Question

我的页面上有一个 <div contenteditable="true"> 和一个 <textarea>。我需要让在文本区域中键入的文本显示在 div 中，同时保留已经在 div 中的文本。我已经通过 textarea 上的 keyup 函数实现了这一点，但它无法正常工作。我相信问题一定是 contenteditable 文本变量随每个 keyup 更新。我尝试更改 value1 的范围，将其改为全局变量，但它仍然不起作用。有帮助吗？

这是我的代码：

JSFiddle

$(".secondary").keyup(function () {
  var value1 = $(".original").html();
  var value2 = $(".secondary").val();
  $(".original").html(value1 + value2);
});

div {
  width: 300px;
  height: 100px;
  border: solid 1px #000;
  overflow-y: scroll;
}

textarea {
  width: 300px;
  height: 100px;
  border: solid 1px #000;
  resize: none;
  overflow-y: scroll;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>Content Editable:</p>
<div class="original" contenteditable></div>

<br><br>

<p>Text Area:</p>
<textarea class="secondary"></textarea>

因此，如果您在 contenteditable 中键入“Foo”，在 textarea 中键入“bar”，contenteditable 中的文本应为“foobar”。

此外，如果 contenteditable 中的最后一个字符是 space，则在 textarea 中键入会在 contenteditable 中添加一个 <br>。有办法解决这个问题吗？

Answer 1

最好使用更改事件而不是 keyup:

$(".secondary").change(function () {
    var value1 = $(".original").html();
    var value2 = $(".secondary").val();
    $(".original").html(value1 + value2);
    /*Reset text area*/
    $(".secondary").val('');
});

Answer 2

我更愿意使用 input 事件处理程序，而不是使用 keyup。试试代码片段：

$(".secondary").on('input', function(event) {
  var val = $('.original').text();
  $('.original').text(val + event.originalEvent.data);
});

div {
  width: 300px;
  height: 100px;
  border: solid 1px #000;
  overflow-y: scroll;
}

textarea {
  width: 300px;
  height: 100px;
  border: solid 1px #000;
  resize: none;
  overflow-y: scroll;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>Content Editable:</p>
<div class="original" contenteditable></div>

<br><br>

<p>Text Area:</p>
<textarea class="secondary"></textarea>

如何在文本区域中键入内容并将该文本添加到内容可编辑的 div 中？

How can I type in a textarea and have that text be added to a contenteditable div?

javascript

jquery

textarea

contenteditable

keyup