javascript - Detect programmatic changes on input type text

Question

Is there a way to get informed when a script changes the value of an input type text.

I have

<input id='test' type='text' />

and a script

document.getElementById('test').value = 'bbb'; 

I want to be notified of the change of the text.

I know I could be notified by keydown,keyup, onblur etcetera (which works if I am trying to track user typing) but what about if the change is done programmatically ?

Many thanks

p.s. No JQuery please or if jquery does it can somebody explain how it achieves it.

Answer 1

If you're dealing with a modern browser, you can try with something like this:

var input = document.getElementById('test');
input._value = input.value;
Object.defineProperty(input, "value", {
    get: function() {return this._value;},
    set: function(v) {
        // Do your stuff
        this._value = v;
    }
});

This solution is good if you actually don't expect any user input (i.e., hidden type input fields), because it's extremely destructive of the DOM basic functionality. Keep that in mind.