MutationObserver doesn't react to changes to text input fields

Question

I'm working on adapting an IE-specific website to other browsers. For example, onpropertychange has been used extensively, and I'm using MutationObserver to emulate that behavior.

However, I can't get MutationObserver to react on value changes to input=text fields, neither on programmatic changes nor user input.

Consider:

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

and

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

If I try to change the value by document.getElementById('test1').value = 'something' or keyboard input, nothing happens.

However, if I try to change something else about the element, for example its id or name (by JavaScript), the MutationObserver fires.

Value changes and MutationObserver work fine with other input types, event with the value of hidden fields.

This behavior is consistent across browsers.

Does anybody know how I can observe value changes on text fields? Or do I have to approach this differently?

Answer 1

The MutationObserve is used to listen for changes of DOM, but when you enter or delete some characters, you will see the attribute value has not been changed. like this:

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

now we delete some characters, now the value is "ZJZHO":

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

you can see that it didn't change the DOM when you delete characters, so, we should change the DOM...

I think we can solve this problem by following method:

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

now the mutation observers can observe changes in the form field's status.

---

I hope you can understand what I say..... My English is poor..........