MutationObserver 无法观察 textarea

Question

我正在尝试使用 MutationObserver 对象向文本区域元素添加自定义撤消操作。我在 MDN 上查看了如何使用这个对象，据我所知，我似乎在正确地使用它。但是，none 的突变正在注册 - 我想在文本区域中的文本发生变化时进行观察。

function initObserver() {
    var editorObserver = new MutationObserver(function(mutations) {
        console.log("MUTATION");

        mutations.forEach(function(mutation){
            console.log(mutation.type);
        });
    });

    var editorObserverConfig = { characterData: true };

    var editor = document.querySelector("#editor");

    editorObserver.observe(editor, editorObserverConfig);
}

initObserver();

这段代码可能有什么问题？

Answer 1

最简单的方法是使用 oninput 事件

var editor = document.querySelector("#editor");
editor.oninput = function(e) {
  // do stuff
}

Answer 2

为了回答您的问题，即代码突变观察者观察到 DOM 的变化有什么问题。 DOM 不会反映对表单元素的值更改，因此不会触发变异观察器。

简而言之，该代码没有任何问题。但是当您在文本区域中输入文本时，您并没有更改 DOM。

MutationObserver 无法观察 textarea

MutationObserver fails to observe textarea

javascript

mutation-observers