为何MutationObserver无法捕获element.value修改输入框值？如何解决？

问题本质 #

当通过element.value = 'x'修改输入框值时，修改的是DOM元素的JavaScript属性（property），而非HTML的特性（attribute）。你使用的MutationObserver默认监听的是attribute变化，因此无法捕获这种修改；而setAttribute('value', 'x')修改的是HTML attribute，所以能被正常监听。

可行解决方案 #

方案1：重写单个输入框的value setter #

通过Object.defineProperty劫持目标输入框value属性的赋值操作，任何代码修改value时都会触发自定义逻辑：

const input = document.querySelector('#test');
// 保存原生的value setter
const originalValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set;

// 重写目标输入框的value setter
Object.defineProperty(input, 'value', {
  set: function(newValue) {
    // 执行自定义捕获逻辑
    console.log('输入框值被代码修改：', newValue);
    document.querySelector('#observer').value = 'Mutation happened';
    
    // 调用原生setter确保值正常更新
    originalValueSetter.call(this, newValue);
    
    // 可选：手动触发input事件，模拟用户输入行为
    this.dispatchEvent(new Event('input'));
  }
});

// 测试：代码修改value会触发捕获逻辑
input.value = 'b';

方案2：全局监听所有输入框 #

如果需要监听页面中所有输入框的代码修改操作，可以重写HTMLInputElement原型上的value setter：

const originalGlobalSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set;

Object.defineProperty(HTMLInputElement.prototype, 'value', {
  set: function(newValue) {
    // 全局捕获逻辑
    console.log(`输入框[${this.id}]值被修改：`, newValue);
    originalGlobalSetter.call(this, newValue);
    this.dispatchEvent(new Event('input'));
  }
});

补充说明 #

• 原生input/change事件仅在用户手动操作输入框时触发，代码直接赋值不会自动触发，因此需要在setter中手动调用dispatchEvent模拟。
• 重写setter的方式可以覆盖所有通过element.value赋值的场景，包括浏览器控制台、扩展、自动化工具等操作。

内容的提问来源于stack exchange，提问作者Anton