如何在标签中显示富文本区域的内容

Question

我正在使用表情符号选择器输入（One Singal表情符号选择器），它将常规输入字段转换为可编辑内容的富文本区域。

我想显示一个标签，其中标签中的输入内容是文本，但是我在常规文本输入中使用的方法不起作用，并且我不确定如何在基础隐藏输入上调用element.val（）字段以获取contenteditable div'的值。

这是我当前的方法，该方法可用于常规输入，但不适用于此富文本输入：

显示文字的标签：

<span>You have entered <span id="name"></span>  </span><br>

输入：

 <input id="idfield2" class="mirror" data-copy="#name"></div>

脚本：

<script>$('.mirror').on('keyup', function() {
$('.'+$(this).attr('class')).val($(this).val());
});</script>

Answer 1

在不使用MutationObserver的情况下（由于过于昂贵），您可以收听新创建的div.mirror内容editable ：

$('div.mirror').on('input', function() {
    $('#name').html($(this).html());
});

这样，只要您在字段中输入数字，它就会显示在您的跨度中。 如果从选择器添加图标，则需要在可编辑的内容中输入一些键，否则，您需要使用MutationObserver。

此外，我使用.html（）代替.val（）或.text（）方法，因为可编辑的内容可以同时包含文本和图标。 因此，为了查看您的图标，请从选择器中选择一个图标，然后在该字段中输入一个字符。

使用MutationObserver可以编写：

//
// With Mutation Observer
//
var targetNode = document.querySelector('div.mirror');
var config = {  attributes:false, childList:false, subtree: true, characterData:true };
var callback = function(mutationsList) {
    for(var mutation of mutationsList) {
      document.getElementById('name').innerHTML = targetNode.innerHTML;
    }
};
var observer = new MutationObserver(callback);

observer.observe(targetNode, config);

// Later, you can stop observing
//  ...   observer.disconnect();

小提琴在这里