Значение HTMLInputElement не может наблюдаться с наблюдателями мутаций

Question

Codepen here.

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 «s value через input.value?

Answer 1

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>