如何让突变观察者检测文本区域的值变化？

Posted 2023-02-19

【中文标题】如何让突变观察者检测文本区域的值变化？

【英文标题】：How do you get a mutation observer to detect a value change of a textarea?

【发布时间】：2012-08-16 10:21:37

【问题描述】：

我见过变异观察者在修改doms时用于获取doms的属性，例如使用google chrome开发者工具。但是，当textarea 中的文本由于用户键入或粘贴而发生更改时，我无法找到如何调用函数。在我的代码中，当用户键入回调时，即使所有观察选项都设置为 true，也不会调用回调。这是什么代码？

【问题讨论】：

Detect when text is entered into the textarea and change it correspondingly 的可能重复项

【参考方案1】：

查看此链接Textarea onchange detection。您需要编写 onkeyup 和 onchange 函数。

顺便说一句，上面的答案不适用于输入法。我的解决方案是setInterval 来检测文本是否每 50 毫秒更改一次。

【讨论】：

感谢您的回答，但使用突变观察者的主要目的是消除依赖轮询来检测变化（来自任何原因）。听起来你在暗示突变观察者不能这样做。

Another similar link，我认为一些流行的库没有提供突变观察器。无论如何，我发现使用轮询来检测更改很容易但并不漂亮。否则，您必须考虑许多条件。

Chao Zhang 可能是指用于中文和日文输入的 IM 修饰符。我遇到了 textarea 没有触发 key* 事件的类似问题，因为 IM 修饰符正在捕获它们。只有退格键、删除键和 Enter 键冒泡。

补充一点：我的情况是 ckeditor 在使用日文输入法时没有触发“更改”事件。显然我不得不改用“key”事件，因为根据 ckeditor 关于“change”事件的文档：“由于性能原因，没有验证内容是否真的改变了。编辑器反而观察了几个通常导致的编辑操作在更改中。因此，在某些情况下，此事件可能会在没有发生更改时被触发，甚至可能会被触发两次。"

【参考方案2】：

变异观察者监听 DOM 的变化。然而，表单元素的当前状态不会被 DOM 反映。

例如，在不设置 value 属性的情况下创建一个输入元素 input。在输入字段中输入文本时，input.value 会反映此文本。另一方面，input.getAttribute('value') 仍然返回 null。

因此，突变观察者无法观察到表单字段状态的这种变化。

(提出的 ECMAScript 第 6 版的 Object.observe 也无济于事。尽管在最近的 Chrome 版本中可以监听宿主对象的变化，但 value 的宿主对象属性的变化em>输入上面没有被观察到。）