9

我正在努力使特定于 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 可以与其他输入类型、带有隐藏字段值的事件一起正常工作。

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

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

4

2 回答 2

8

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

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

我希望你能明白我说的......我的英语很差............

于 2015-08-22T07:56:27.063 回答
0

我们可以使用 jQuery onkey 函数。

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


 $("#test1").keydown(function(){
 console.log('pressed')
})
于 2020-01-02T09:55:05.053 回答