Mutation ObserversでHTMLInputElementの.valueを見ることができません

Question

Codepen here。

HTML：

<input placeholder="HRM"/> 

はJavaScript：placeholder属性が変更され

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" 

、突然変異オブザーバー火災。 しかし、value属性が変更されると、突然変異監視員は発砲しません。なぜ誰かが確かに理解していますか？ （うまくいけば、ECMAScriptの/ HTML5標準へのリンクで裏打ちされた。）

は、誰もが私たちにはJavaScriptをHTMLInputElementのvalueinput.value経由に変更を行ったときのために見ることができる方法を知っていますか？

Answer 1

突然変異観測者は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>