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不能用突变观察者观察

回答

相关问题