Question

我正致力于将特定于IE的网站调整到其他浏览器。例如，onpropertychange已被广泛使用，我使用MutationObserver来模拟该行为。

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

考虑：

<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（＆＃39; test1＆＃39;）更改值。值=＆＃39;某些内容＆＃39;或键盘输入，没有任何反应。

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

值更改和MutationObserver可以与其他输入类型一起使用，具有隐藏字段值的事件。

此行为在不同浏览器中保持一致。

有人知道如何观察文本字段的值变化吗？或者我必须采用不同的方法吗？

Answer 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)
}

现在，变异观察者可以观察到表格字段状态的变化。

我希望你能理解我所说的.....我的英语很差..........

Answer 2

我们可以使用jQuery onkey函数。

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


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

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

2 个答案: