Onpropertychange for textbox in Firefox?

Question

How to handle onpropertychange for a text field in Firefox using JavaScript?

The following 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

There are two ways to simulate the onpropertychange event, the Mutation events, as mentioned above, which should work the same in modern browsers, and the non-standard “object.watch” method, which will support older versions of FF <3.

See the MDC documentation.

Object.watch

Mutation events

Answer 2

The onpropertychange event onpropertychange have an IE value: http://www.aptana.com/reference/html/api/HTML.event.onpropertychange.html .

However, with that said, Firefox at least 3.0.10 supports 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 extension for Firefox Firebug .

Answer 3

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

Answer 4

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