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

【问题标题】：How to show content of rich text area in label如何在标签中显示富文本区域的内容
【发布时间】：2017-12-30 14:07:22
【问题描述】：

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

我希望在标签中显示输入文本的标签，但我使用常规文本输入的方法不起作用，我不确定如何在底层隐藏输入字段来获取 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>

【问题讨论】：

您的代码不正确，您尝试选择相同的输入并在其中设置您已经插入的相同值，您要做什么？！！

标签： javascript jquery html css

【解决方案1】：

不使用MutationObserver (because too expensive)，您可以收听新创建的div.mirror content 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();

小提琴是here

【讨论】：