onpropertychange for a textbox in firefox ?

Question

How to handle the onpropertychange for a textbox in Firefox using javascript?

below is an example

var headerBGColorTextBox = document.getElementById('<%= tbHeaderBGColor.ClientID %>');

if (headerBGColorTextBox != null) {
  headerBGColorTextBox.pluggedElement = document.getElementById('<%= trHeaderBG.ClientID %>');
  headerBGColorTextBox.onpropertychange = function() {
    alert('function called');
    if (event.propertyName == 'style.backgroundColor' && event.srcElement.pluggedElement != null)
      alert(event.propertyName);
    event.srcElement.pluggedElement.style.backgroundColor = event.srcElement.style.backgroundColor;
  };
}

Answer 1

onpropertychange is non-standard. See http://msdn.microsoft.com/en-us/library/ms536956

Answer 2

It appears as if the onpropertychange event is IE Specific: http://www.aptana.com/reference/html/api/HTML.event.onpropertychange.html.

However, with that said, Firefox, at least 3.0.10 does support an event called "DOMAttrModified". The following is a snippet of how it works:

document.body.addEventListener("DOMAttrModified", function () { console.log ("Args: %o", arguments); }, false);
document.body.id = "Testing";

Where console.log is the assuming the Firefox extension Firebug is installed.

Answer 3

There are two ways to mimic the onpropertychange event, Mutation events as mentioned above that should work equally across modern browsers and the "object.watch" non-standard method that will provide support for old versions of FF < 3.

See documentation on MDC.

Object.watch

Mutation events

Answer 4

using "DOMAttrModified",when the value was modified by javascript,function triggered,but when modified by input ,it's not triggered.