JSFiddle - React, Tailwind, and code Playground

by Chen JianSheng

HTML

<p>MutationObserver 监听下面的 ol 元素：</p>

<ol contenteditable oninput="" id="ol-input">
  <li>点击这里请输入对应内容</li>
</ol>

<p>textarea 为触发回调后显示ol 的内容：</p>

<textarea name="" id="text-area" cols="30" rows="10"></textarea>

JavaScript

var MutationObserver = window.MutationObserver || window.WebkitMutationObserver || window.MozMutationObserver;

var $input = document.getElementById('ol-input');
var $textarea = document.getElementById('text-area');
console.log('input is:', $input, $textarea);
var observer = new MutationObserver(function(mutations) {
  console.log('observer!', mutations)
  
  mutations.forEach(function(mutation) {
    if (mutation.type === 'childList' || mutation.type === 'characterData') {
      var olList = [].slice.call($input.children)
        .map(function(node) {
          return node.innerHTML;
        })
        .filter(function(s) {
          if (s === '<br>') return false;
          return true;
        });
      $textarea.value = olList.join('\n');
    }
  })
})

var config = {
  attributes: true,
  subtree: true,
  characterData: true,
  childList: true
};

observer.observe($input, config);