JavaScript使用MutationObserver來檢測輸入標記中的值更改

我想要檢測輸入字段中的文本/值更改的時間。因此，我閱讀了大量示例並嘗試了以下代碼，但它不起作用。其中有fiddle preview .even if我通過js代碼更改了值，我想要檢測這些更改。JavaScript使用MutationObserver來檢測輸入標記中的值更改

HTML

<input type="text" id="exNumber"/>

的JavaScript

var observer = new MutationObserver(function(mutations) { 
    mutations.forEach(function(mutation) { 
    // console.log('Mutation type: ' + mutation.type); 
    if (mutation.type == 'childList') { 
     if (mutation.addedNodes.length >= 1) { 
     if (mutation.addedNodes[0].nodeName != '#text') { 
//  console.log('Added ' + mutation.addedNodes[0].tagName + ' tag.'); 
     } 
     } 
     else if (mutation.removedNodes.length >= 1) { 
     // console.log('Removed ' + mutation.removedNodes[0].tagName + ' tag.') 
     } 
    } 
    if (mutation.type == 'attributes') { 
     console.log('Modified ' + mutation.attributeName + ' attribute.') 
    } 
     }); 
}); 

var observerConfig = { 
     attributes: true, 
     childList: false, 
     characterData: false 
}; 

// Listen to all changes to body and child nodes 
var targetNode = document.getElementById("exNumber"); 
observer.observe(targetNode, observerConfig);

來源

2015-09-03 while true

爲了理解正在發生的事情是必要的屬性（內容屬性）和財產（IDL屬性）之間清理的差異。我不會在這個擴大爲SO目前已經覆蓋了話題優良的答案：

當您更改input元素的內容，通過鍵入或通過JS輸入：

targetNode.value="foo";

瀏覽器更新value屬性但不是value屬性（它反映了defaultValue屬性）。

然後，如果我們看一下spec of MutationObserver，我們會看到屬性是可以使用的對象成員之一。所以，如果你明確地設置value屬性：

targetNode.setAttribute("value", "foo");

MutationObserver將通知屬性修改。但是屬性在規範列表中沒有：value屬性不能被觀察到。

如果要檢測用戶何時更改輸入元素的內容，input event是最直接的方法。如果您需要捕捉JS修改，請參閱setInterval並將新值與舊值進行比較。

檢查此SO question瞭解不同的替代方案及其侷限性。

來源

2015-09-03 19:16:07 David

'onkeyup'對我的case.actually沒有用，因爲某些原因我無法修改外部腳本。腳本更改輸入字段的值。因此，我想要檢測文本何時更改 –

在這種情況下，請選中[this other one]（http://stackoverflow.com/q/1948332/5247200）。 – David

tnx david所以唯一的醜陋解決方案是使用計時器。我不希望這就是爲什麼我試圖觀察員。但不幸的是，可能沒有其他方式做到這一點 –

JavaScript使用MutationObserver來檢測輸入標記中的值更改

回答

相關問題