如何监听被不可访问JavaScript修改的输入框变化？

放弃依赖仅响应用户交互的change事件，改用MutationObserver监听输入框的value属性变更，就能捕获所有来源的修改——不管是用户手动操作还是脚本赋值。

实现代码 #

// 替换为你的目标输入框选择器（比如ID、类名）
const targetInput = document.querySelector('#your-frevvo-input');

// 配置观察规则：只监听value属性的变化
const observerOptions = {
  attributes: true,
  attributeFilter: ['value'],
  attributeOldValue: true // 可选：保留旧值用于对比
};

// 创建观察器并定义回调逻辑
const valueObserver = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.attributeName === 'value') {
      console.log('输入框值变更:', {
        旧值: mutation.oldValue,
        新值: targetInput.value
      });
      // 在这里执行你需要的业务操作
    }
  });
});

// 启动监听
valueObserver.observe(targetInput, observerOptions);

// 如需停止监听，执行：
// valueObserver.disconnect();

关键说明 #

• 不需要修改frevvo的精简JS代码，所有监听逻辑在外部全量JS中独立实现。
• MutationObserver是浏览器原生API，兼容性覆盖所有现代浏览器，能精准捕获任何对输入框value属性的修改操作。
• 务必将#your-frevvo-input替换为匹配你frevvo表单输入框的实际选择器（可通过浏览器开发者工具查看元素的ID或类名）。

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