我在一个页面上有一个表单有多个输入。如果有人通过浏览器控制台(或浏览器扩展或浏览器自动化工具,如 puppeteer)向我的表单添加任何内容,我想处理事件。
例如更改表单中的值的代码,我希望能够在我的
input
元素的值更改时获得一些事件。
let element = document.querySelector('#test');
element.value = 'x';
我希望这段代码会引起一些我可以处理的事件/突变。但没有任何东西被触发。我还没有找到任何触发的事件,属性更改的突变也不起作用。
奇怪的是,当输入值被
element.value = 'x'
改变时,并没有触发突变。但是当使用setAttribute
时一切正常element.setAttribute('value', 'x')
我的代码:
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation) {
console.log('Mutation happened');
let observer = document.querySelector('#observer');
observer.value = 'Mutation happened';
}
});
});
let element = document.querySelector('#test');
observer.observe(element, { attributes: true });
//Setting value by using setAttribute API causes mutation
//element.setAttribute('value', 'a');
//Setting value by using `.value` API does not cause mutation
element.value = 'b';
Input field: <input id='test' onInput='console.log(1)'/><br/>
Does mutation happen? <input id='observer' value='Mutation did not happen'/>
如何通过 Javascript 代码捕捉 HTML 输入值的变化? 应该没有必要
MutationObserver
。任何选项都可以。