onpropertychange pour une zone de texte dans Firefox?

Question

Comment gérer le onpropertychange pour une zone de texte dans Firefox en utilisant JavaScript?

est un exemple ci-dessous:

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 est non standard. Voir http://msdn.microsoft.com/en-us/library/ms536956

Answer 2

Il semble que l'événement onpropertychange est spécifique à IE: http://www.aptana.com/reference/html/api/HTML.event.onpropertychange.html.

Cependant, avec cela dit, Firefox, au moins 3.0.10 prend en charge un événement appelé "DOMAttrModified". Ce qui suit est un extrait de la façon dont cela fonctionne:

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

Où console.log est l'hypothèse où l'extension Firefox Firebug est installé.

Answer 3

Il y a deux façons de mimer l'événement onPropertyChange, les événements Mutation mentionnés ci-dessus qui devraient fonctionner de manière égale entre les navigateurs modernes et la « object.watch » méthode non standard qui fournira un soutien pour les anciennes versions de FF < 3.

Voir la documentation sur MDC.

Object.watch

Mutation events

Answer 4

Le code suivant fonctionne:

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