Question

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

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

2 个答案: