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

Question

我的页面上有一个<div contenteditable="true">和一个<textarea>。我需要获取要在div 中显示的文本区域中键入的文本，同时保留div 中已有的文本。我已经通过textarea上的keyup功能实现了这一目标，但它无法正常工作。我相信问题一定是每次keyup更新contenteditable文本变量。我尝试更改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中的最后一个字符是空格，则在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

与其使用keyup，我更喜欢使用input事件处理程序。尝试代码段：

$(".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>