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

score 5 · Answer 1 · answered May 28 '09 at 06:36

5

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

answered May 28 '09 at 06:36

Christophe Eblé

8,071
3
33
32

1

OBJECT.watch will not track DOM element changes. You have to use DOMAttrModified mutation event in W3C compliant browsers. OBJECT.watch is for trackign property changes on object you've created in Javascript only. – ThatGuy Aug 05 '11 at 17:40

score 4 · Answer 2 · answered May 28 '09 at 06:30

4

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.

answered May 28 '09 at 06:30

Jordan S. Jones

13,703
5
44
49

DOMAttrModified is also supported by IE9 and Opera(7+). Still doesn't work in webkit as of August 2011. – ThatGuy Aug 05 '11 at 18:23
@nix: Still no news for WebKit? Do you know what they plan to support this kind of use case? – Eldros Sep 12 '11 at 09:01

score 2 · Answer 3 · answered May 28 '09 at 06:20

2

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

answered May 28 '09 at 06:20

Matthew Flaschen

278,309
50
514
539

Paul Sweatte · Answer 4 · 2012-12-19T20:12:42.227

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

onpropertychange for a textbox in Firefox?

4 Answers4

Linked