MutationObserver как отменить изменения в тексте

Question

let b = new MutationObserver(a => {
  console.log(a); // console.log(изменения)
});

// наблюдать за всем, кроме атрибутов
b.observe(elem, {
  childList: true, // наблюдать за непосредственными детьми
  subtree: true, // и более глубокими потомками
  characterDataOldValue: true  // передавать старое значение в колбэк
});

<div contentEditable id="elem">Отредактируй <b>меня</b>, пожалуйста</div>

Как сделать чтобы слово меня не изменялось с помощью наблюдателя ?

Answer 1

Обозреватель не может отменять изменения, он лишь говорит о них. Но ничего не мешает сохранять состояние самостоятельно и откатывать в нужной ситуации

let prevState = elem.innerHTML, b = new MutationObserver(a => {
  if (!elem.innerHTML.match(/<b>меня<\/b>/))
    elem.innerHTML = prevState;
  prevState = elem.innerHTML;
});

// наблюдать за всем, кроме атрибутов
b.observe(elem, {
  childList: true, // наблюдать за непосредственными детьми
  subtree: true, // и более глубокими потомками
  characterDataOldValue: true  // передавать старое значение в колбэк
});

<div contentEditable id="elem">Отредактируй <b>меня</b>, пожалуйста</div>

БЛОГ НА HUSL

MutationObserver как отменить изменения в тексте

Ответы (1 шт):