MutationObserver 无法观察 textarea

Posted 2023-02-19

【中文标题】MutationObserver 无法观察 textarea

【英文标题】：MutationObserver fails to observe textarea

【发布时间】：2016-02-14 13:06:09

【问题描述】：

我正在尝试使用 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();

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

【参考方案1】：

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

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

【讨论】：

我想这很适合我正在做的事情。

是否有替代输入的替代方法，其作用更像文本编辑器？ IE，不是每一个字符都听，有没有把字符捆绑起来，触发一次的事件？

"是否有一个事件将字符捆绑并触发一次？尝试onchange事件？预期结果是什么？

onchange 仅在 textarea 失去焦点时触发。我希望撤消操作在最后一个操作输入常规文本时表现正常，但覆盖按下制表符时发生的情况（插入制表符而不是在元素之间跳转等）。如果我监听选项卡事件和输入事件，我会收到很多输入事件，但我不知道如何预测浏览器将如何处理它们，所以我不能一次将它们全部删除。

不确定是否正确解释要求？替换 textarea oninput 中的字符？在oninput 处理程序中尝试过console.log(e)？可以尝试使用e.preventDefault()，e.keyCode 过滤按下哪个键，替换字符？

【参考方案2】：

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

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

【讨论】：

但是 characterData 属性是用于根据这个检测节点内文本的变化...developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/…我有一个示例教程，其中 characterData 正在工作，你可以在这里看到codepen.io/impressivewebs/pen/aXrzex?editors=0011

@iamatulK 字符数据与 value 属性不同。 value 属性不会反映在 DOM 中。节点的 CharacterData 但又是 characterData 与 DOM 元素的 value 属性不同。你不能使用变异观察者来监控值的变化。

@iamatulK 正如我在回答“DOM 不反映表单元素的值更改”中所说的那样，但您的示例使用的是内容可编辑的段落元素。他们是两个完全不同的场景。节点的内容不同于表单元素的 value 属性。