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;
  };
}

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;
  };
}

• javascript
• events
• firefox
• dom
• mutation-events

4 Answers 4

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

It appears as if the onpropertychange event is IE Specific: http://www.aptana./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.

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

The following code works:

var foo = '<%= tbHeaderBGColor.ClientID %>';

function changetext() 
  {
  alert('function called');
  if (event.propertyName == 'style.backgroundColor' && event.srcElement.pluggedElement != null)
    alert(event.propertyName);

  event.srcElement.pluggedElement.style.backgroundColor = event.srcElement.style.backgroundColor;
  }

if (!!document.addEventListener)
  {
  document.getElementById(foo).addEventListener("DOMAttrModified", changetext, false);
  }
else
  {
  document.getElementById(foo).addBehavior("foo.htc");
  document.getElementById(foo).attachEvent("onpropertychange", changetext);
  }

DOM Mutation Events