如何检测由外部函数修改的文本输入框的值变化？

我明白你的痛点——当输入框的值是通过JS代码直接赋值（而非用户手动输入）时，常规的input、change这类事件确实不会自动触发，MutationObserver也因为只盯着DOM属性变化而失效。这里有几个靠谱的解决思路，你可以根据自己的场景选择：

1. 拦截value属性的setter（最通用方案） #

这个方法能捕获所有通过element.value = ...的赋值操作，不管是哪个函数调用的。原理是重写目标输入框的value属性setter，在完成赋值的同时触发我们需要的事件或回调。

const targetInput = document.getElementById('your-input-id');

// 先保存原生的value setter
const originalValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set;

// 重写当前输入框的value setter
Object.defineProperty(targetInput, 'value', {
  set: function(newVal) {
    // 先调用原生setter完成赋值
    originalValueSetter.call(this, newVal);
    // 触发input事件，让你之前的监听逻辑能捕获到变化
    this.dispatchEvent(new Event('input', { bubbles: true }));
    // 也可以直接在这里执行你的自定义回调
    // yourChangeCallback(newVal);
  }
});

之后不管哪个函数给这个输入框赋值，都会自动触发input事件，你之前的事件监听就能正常工作了。

2. 用Proxy代理输入框元素（适合能控制元素引用的场景） #

如果你能拿到那个被赋值的输入框对象的引用，可以用Proxy包装它，拦截value的赋值操作：

const targetInput = document.getElementById('your-input-id');
const proxiedInput = new Proxy(targetInput, {
  set(target, prop, value) {
    if (prop === 'value') {
      // 先完成赋值
      target[prop] = value;
      // 触发事件通知变化
      target.dispatchEvent(new Event('input', { bubbles: true }));
    }
    return true;
  }
});

// 注意：只有当设置值的函数使用这个proxiedInput时，拦截才会生效

这个方法的局限性在于，必须确保设置值的函数使用的是你代理后的元素引用，如果它直接操作原始DOM元素，那拦截就无效了。

3. 手动触发事件（如果你能修改设置值的函数） #

如果那个负责设置值的函数是你能控制的，最简单的方法就是在赋值后手动触发事件：

function setInputValue(newValue) {
  const input = document.getElementById('your-input-id');
  input.value = newValue;
  // 手动触发input事件，让监听逻辑感知到变化
  input.dispatchEvent(new Event('input'));
}

这种方法最直接，也没有额外副作用，前提是你有权修改那个设置值的函数。

补充：为什么MutationObserver没用？ #

你提到MutationObserver没效果，是因为element.value = ...修改的是DOM元素对象的JS属性，而非DOM节点的HTML属性（也就是你在HTML代码里写的value="xxx"）。MutationObserver默认监听的是DOM属性的变化，所以无法捕获这种JS层面的value修改——除非你手动用input.setAttribute('value', newValue)修改，但这种写法在实际开发中很少见。

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