如何替代on('input')追踪文本框间接变化，实现后续文本框值同步？

方法1：主动触发事件（适用于可控制第5个文本框修改逻辑的场景） #

如果是通过其他控件计算后修改第5个.foo的值，只需在修改代码后手动触发input事件，原有同步逻辑就能生效：

// 示例：修改第5个文本框值后触发input事件
$('.foo').eq(4).val(计算结果).trigger('input');

方法2：监听属性变化（适用于无法控制修改逻辑的场景） #

使用MutationObserver监听文本框的value属性变化，不管是用户手动输入还是JS代码修改，都能触发同步：

jQuery($ => {
  // 定位第5个.foo文本框（索引从0开始，对应eq(4)）
  const targetInput = $('.foo').eq(4)[0];
  if (!targetInput) return;

  // 创建属性变化观察者
  const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
      if (mutation.type === 'attributes' && mutation.attributeName === 'value') {
        // 同步第6至15个文本框（索引5到14）
        $('.foo').slice(5, 15).val(targetInput.value);
      }
    });
  });

  // 配置观察规则：仅监听value属性变化
  observer.observe(targetInput, {
    attributes: true,
    attributeFilter: ['value']
  });
});

补充说明 #

• input和change事件仅在用户交互操作时触发，通过JS调用.val()修改值不会触发这类事件，这是原有代码失效的核心原因。
• MutationObserver是现代浏览器原生支持的API，可监听DOM元素的属性、子节点等变化，兼容性覆盖IE11及所有现代浏览器。

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