HTMLInputElement的.value不能用突變觀察者觀察

Codepen here。HTMLInputElement的.value不能用突變觀察者觀察

HTML：

<input placeholder="HRM"/>

JavaScript的：

let input = document.querySelector('input') 

let observer = new MutationObserver((mutations) => { 
    mutations.forEach((mutation) => { 
    if (mutation.type === 'attributes') { 
     //let value = mutation.target.value 
     console.log(mutation) 
     console.log(mutation.attributeName) 
    } 
    }) 
}).observe(input, { 
    attributes: true 
}) 

input.placeholder = 'asdfsd' 
input.value = "Y U NO FIRE"

當placeholder屬性被改變，突變觀察員火災。但是，當value屬性發生變化時，Mutation Observer不會觸發。有人對爲什麼有堅實的理解嗎？（希望通過指向ECMAScript/HTML5標準的鏈接支持）。

有誰知道我們怎樣才能觀察JavaScript何時更改HTMLInputElement的value通過input.value？

來源

2016-12-19 geoyws

，因爲在這個時間值是一個屬性不是一個屬性？ – Kaiido

謝謝@Kaiido ......這就是我需要澄清的...有任何鏈接到一個有信譽的來源？ – geoyws

在手機上，但會試圖找出這是yep。但基本上，佔位符就像修改時的樣式一樣也會改變屬性，而不是價值的情況。 – Kaiido

Mutation Observer將觀察DOM中的變化，但是當您在輸入內輸入文本時，如果檢查DOM元素，則不會發生變化。所以我們需要引發這種變化。

您可以通過將輸入屬性設置爲插入值來實現此目的。看下面的代碼。

let input = document.getElementById('inp'); 
 
let result = document.getElementById("result"); 
 

 
let observer = new MutationObserver((mutations) => { 
 
    mutations.forEach((mutation) => { 
 
    if (mutation.type === 'attributes') { 
 
     result.innerHTML = mutation.target[mutation.attributeName]; 
 
    } 
 
    }) 
 
}).observe(input, { 
 
    attributes: true 
 
}); 
 

 
input.oninput =() => { 
 
    input.setAttribute("value", input.value); 
 
}

<input placeholder="HRM" value="" id="inp" /> 
 

 
<p>Mutation observer result:<br /> 
 
    <div id="result"></div> 
 
</p>

來源

2018-03-09 15:29:43

HTMLInputElement的.value不能用突變觀察者觀察

回答

相關問題