ラベル内のリッチテキストエリアの内容を表示する方法

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> 

スクリプト：

あなたは編集可能な新たに作成された div.mirror内容に聴取することができるMutationObserver (because too expensive)を使用せずに

Answer 1

：それはあなたのスパンで表示されるフィールドで

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

このように、いつでもあなた桁の何か。 ピッカーからアイコンを追加する場合、編集可能なコンテンツの一部のキーを数字で入力する必要があります。そうでない場合は、MutationObserverを使用する必要があります。

また、編集可能なコンテンツにテキストとアイコンの両方を含めることができるため、.val（）または.text（）メソッドの代わりに.html（）を使用しました。したがって、アイコンを表示するには、ピッカーからアイコンを選択した後、フィールド内の文字を数字にする必要があります。

// 
// 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