Mutation Observers로 HTMLInputElement의 .value를 볼 수 없습니다.

Question

Codepen here.

HTML :

<input placeholder="HRM"/> 

자바 스크립트 다음 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 특성이 변경되면 Mutation Observer가 실행되지 않습니다. 아무도 왜 그 이유에 대한 확실한 이해가 있습니까? (희망 ECMA 스크립트/HTML5 표준에 대한 링크와 함께 백업.)

사람은 우리가 자바 스크립트 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>