Javascript event for when a value is changed via javascript

So I know several varieties of this question have been asked in the past but I just want to see if anything has changed with html5 and everything.

Basically, I have web based forms that have events for when they change. (Via onchange, onclick, ect). Now these forms actually store their values in a javascript variable. I realize how I am doing this is different and I could just be checking the fields at 开发者_如何学Goa later time for the changes. However, because of the application I am building, having the immediate events is necessarily.

The problem I am having is that things like password managers (and I am assuming plugins like roboform) change the values of the form fields via javascript. When javascript changes these values, it doesn't fire the events that I am currently using.

Now I know that IE has a proprietary function called "propertychange". Firefox also has a similar function called "DOMAttrModified" (which I believe also is kind of supported in IE9 now). Each of these, I believe, would work because I could actively watch the value of the field and this event would be fired when javascript changes the value. However, both chrome and safari don't seem to have a similar function.

My main question is if I am missing anything that would allow this to work in chrome and safari (without using settimeout)? Also, is there going to be a way to do this in HTML5? It seems a little silly to me that there isn't a standard way to do this.

Lastly, is it possible to instead STOP things like lastpass from actually filling in your fields. I know you can put autocomplete="off" and they are supposed to not actually fill in those fields but that doesn't seem to be working with lastpass.

Firefox has a non-standard Object.watch() method that allows you to know when a property is changed from JavaScript - see https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/watch. From all I know, no other browsers chose to implement it because of performance implications.

For Chrome you are out of luck I think - they even chose to not implement DOM mutation events to get a better performance score. You can only resort to polling there - e.g. check the value every 100 milliseconds to see whether it changed. Safari supports DOMAttrModified but it might not fire in this scenario (depends on whether the password manager actually changes the attribute or only the property).

Both Safari and Chrome support DOMSubtreeModified, you can listen for it and then check for the specific attribute if the DOM subtree of the element doesn't get much changes otherwise.

Alternatively, you might try using Javascript setters (via Object.defineProperty).

Perhaps something like this (plain JS)

<script>

var tId=[];

window.onload=function() {
  var inputs =document.getElementsByTagName("input");
  for (var i=0, n=inputs.length;i<n;i++) {
    if (inputs[i].className.indexOf("watch") !=1) {
      inputs[i].onfocus=function() {
        var id = this.id;
        tId[id]=setInterval(
          function(){ 
            var fld = document.getElementById(id);
            if (fld.value!=fld.defaultValue) fld.onchange() 
          },100);
      }      
      inputs[i].onblur=function() {
        var id = this.id;
        clearInterval(tId[id])
      }      
    }
  }
}


</script>
<form id="form1">
<input type="text" name="field1" id="field1" value="" class="watch"/>
</form>