MutationObserver 不会对文本输入字段的更改做出反应答案

【问题标题】：MutationObserver doesn't react to changes to text input fieldsMutationObserver 不会对文本输入字段的更改做出反应
【发布时间】：2013-10-23 11:58:40
【问题描述】：

我正在努力使特定于 IE 的网站适应其他浏览器。例如，onpropertychange 已被广泛使用，我正在使用 MutationObserver 来模拟该行为。

但是，我无法让 MutationObserver 对 input=text 字段的值更改做出反应，无论是对编程更改还是用户输入。

考虑：

<input type="text" name="test1" id="test1" />

和

var config = { attributes: true, childList: true, characterData: true, subtree: true };
var observer = new MutationObserver(function() { alert('success'); } );
observer.observe(document.getElementById('test1'), config);

如果我尝试通过 document.getElementById('test1').value = 'something' 或键盘输入更改值，则不会发生任何事情。

但是，如果我尝试更改元素的其他内容，例如它的 id 或名称（通过 JavaScript），MutationObserver 就会触发。

值变化和 MutationObserver 可以与其他输入类型、带有隐藏字段值的事件一起正常工作。

这种行为在浏览器中是一致的。

有人知道我如何观察文本字段的值变化吗？还是我必须以不同的方式处理这个问题？

【问题讨论】：

对于用户触发的更改，有change。我假设您主要关心程序化更改？
是的。但很感兴趣，即使是键盘输入也不起作用。
它不起作用，因为value 属性没有得到更新。遗憾的是，Mutation Observers 只观察物理 DOM 而不是虚拟 DOM。这就是为什么ele.onclick = function(){} 永远不会触发 Mutation Observers。但是，您可以使用 this horrible evil library 来强制在使用 Javascript 设置 value 属性时更新属性。运行 wretched 库后，上面的代码应该可以正常运行。

标签： javascript

【解决方案1】：

MutationObserve 用于监听 DOM 的变化，但是当你输入或删除一些字符时，你会看到属性值没有改变。像这样：

name: <input type="text" id="name" value="ZJZHOME">

现在我们删除一些字符，现在的值为“ZJZHO”：

var input = document.getElementById('name');
input.getAttributes('value') //alse "ZJZHOME"
input.value                  // now is "ZJZHO"

你可以看到当你删除字符时它并没有改变DOM，所以，我们应该改变DOM...

我认为我们可以通过以下方法解决这个问题：

input.oninput = function(e) {
    this.setAttribute('value', input.value)
}

现在突变观察者可以观察表单字段状态的变化。

希望你能听懂我说的……我的英文很差…………

【讨论】：

【解决方案2】：

我们可以使用jQuery的onkey函数。

<input type="text" name="test1" id="test1" /><br>


 $("#test1").keydown(function(){
 console.log('pressed')
})

【讨论】：