Javascript event for when a value is changed via javascript

Question

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 a 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.

I had to read trough to the fourth paragraph to figure out that you're asking for a cross-browser propertychange/DOMAttrModified implementation. You could have mentioned that earlier (in the title?)... — Šime Vidas
– Šime Vidas, Commented Jun 24, 2011 at 13:27
Well that isn't the only thing I am looking for. If there is an event instead to grab when javascript changes a value then I am looking for that as well. I feel my title explains exactly what I am wanting though. — pierce71588
– pierce71588, Commented Jun 24, 2011 at 13:30
Are you only interested in value properties of from-field DOM elements, or do you need a solution that works on any property of any object? — Šime Vidas
– Šime Vidas, Commented Jun 24, 2011 at 13:35
@Vidas I only am concerned with the value property. popertychange/DOMAttrModified are the only methods that I actually have found that can do that though. Now, this gets more complicated when it comes to select boxes but I am not as concerned about these because I believe I have other work arounds. — pierce71588
– pierce71588, Commented Jun 24, 2011 at 13:47

score 2 · Accepted Answer · 2011-06-24 14:22:17Z

2

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

edited Jun 24, 2011 at 14:22

answered Jun 24, 2011 at 13:43

user785541

Sign up to request clarification or add additional context in comments.

2 Comments

pierce71588 Over a year ago

Thanks that is good to know about. Unfortunately, chrome and safari are the ones that I need a solution for.

user785541 Over a year ago

@pierce71588: I revised my answer to add a paragraph on Chrome and Safari.

Tgr · Accepted Answer · 2011-06-24 13:36:02Z

0

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

answered Jun 24, 2011 at 13:36

Tgr

28.4k13 gold badges88 silver badges123 bronze badges

8 Comments

pierce71588 Over a year ago

Thanks for the answer. I tried this and it does appear to work when you change the actual HTML or add nodes or remove nodes. (Awesome, have always wondered if it was possible to do those!) However, it doesn't appear to work when you actually change the value of an input box.

Tgr Over a year ago

@pierce71588: how about using setters?

pierce71588 Over a year ago

@Tgr well the problem is that things like "lastpass" are actually doing the work, not me. So I can't really control how they change the value on the page. I don't have to have "lastpass" work even. The biggest issue is it shows up on the form, but it isn't actually there since my javascript hasn't ran.

Tgr Over a year ago

You can control how the node reacts, though, with something like Object.defineProperty(passwordField, 'value', {set: function(val) {this.innerHTML = val; console.log(val);}});. I'm not saying it's a good solution, but as a desperation move, it might work.

pierce71588 Over a year ago

@Tgr well I am cautiously optimistic. This "appears" to actually catch it when I change the value in both firefox 4 and chrome. IE doesn't work but there are other options for IE. Do you know by chance what versions this works for? Now I just need to do some more research into what this is actually doing because it appears that it is making the value attribute inaccessible through normal means.

|

mplungjan · Accepted Answer · 2011-06-24 14:10:33Z

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>

Collectives™ on Stack Overflow

Javascript event for when a value is changed via javascript

3 Answers 3

2 Comments

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related