Question

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

我希望在标签中显示输入文本的标签，但我使用常规文本输入的方法不起作用，我不知道如何'调用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 (because too expensive)，您可以收听新创建的 div.mirror内容可编辑：

$('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

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

1 个答案: