Are you looking to track user changes or programmatic changes in the input element? For modern browsers, monitoring the input event can inform you when the input field value is modified by user action. Unfortunately, there isn't a consistent way across different browsers to detect if the field value has been changed programmatically without implementing your notification system.
A while back, I crafted a cross-browser function to monitor all types of user modifications to an input field in various browsers. While this code snippet is written as a jQuery method, it can be adapted to plain JavaScript with ease. It examines whether the new events are supported and utilizes them if available. If unsupported, it attaches numerous events to capture all potential methods through which a user could alter the field (such as drag-and-drop, copy/paste, typing, etc.).
(function($) {
var isIE = false;
/*@cc_on
isIE = true;
@*/
var events = [
"keyup", false,
"blur", false,
"focus", false,
"drop", true,
"change", false,
"input", false,
"textInput", false,
"paste", true,
"cut", true,
"copy", true,
"contextmenu", true
];
if (!isIE) {
var el = document.createElement("input");
var gotInput = ("oninput" in el);
if (!gotInput) {
el.setAttribute("oninput", 'return;');
gotInput = typeof el["oninput"] == 'function';
}
el = null;
if (gotInput) {
events = [
"input", false,
"textInput", false
];
}
}
$.fn.userChange = function(fn, data) {
function checkNotify(e, delay) {
var self = this;
var this$ = $(this);
if (this.value !== this$.data("priorValue")) {
this$.data("priorValue", this.value);
fn.call(this, e, data);
} else if (delay) {
var eCopy = $.extend({}, e);
setTimeout(function() {checkNotify.call(self, eCopy, false)}, 1);
}
}
this.each(function() {
var this$ = $(this).data("priorValue", this.value);
for (var i = 0; i < events.length; i+=2) {
(function(i) {
this$.on(events[i], function(e) {
checkNotify.call(this, e, events[i+1]);
});
})(i);
}
});
}
})(jQuery);