onpropertychange для текстового поля в Firefox?

Question

Как обрабатывать onpropertychange для текстового поля в Firefox с помощью JavaScript?

Ниже приведен пример:

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 не является стандартной. См. http://msdn.microsoft.com/en-us/library/ms536956

Answer 2

Похоже, что событие onpropertychange имеет значение IE: http://www.aptana.com/reference/html/api/HTML.event.onpropertychange.html.

Однако, с учетом сказанного, Firefox не менее 3.0.10 поддерживает событие под названием «DOMAttrModified». Ниже приведен фрагмент, как это работает:

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

Где console.log является предполагая, что расширение Firefox Firebug установлен.

Answer 3

Есть два способа имитируют события onpropertychange, Мутация события, как упоминалось выше, которые должны работать одинаково и в современных браузерах и «Object.watch» нестандартный метод, который будет обеспечивать поддержку для старых версий FF < 3.

См. Документацию по MDC.

Object.watch

Mutation events

Answer 4

Следующий код работает:

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