如何检测textarea的值被编程设置并触发后续处理函数？

当你通过API获取内容并设置到textarea后，会发现onchange、oninput这类用户交互触发的事件根本不会执行——因为这些事件只对用户手动操作（比如输入、粘贴）生效，编程式修改value属性不会自动触发它们。下面给你几种可行的解决办法：

方法一：手动触发事件 #

最简单的方式就是在设置完value后，主动触发input或change事件，让绑定的回调函数执行。

修改你的按钮点击逻辑：

changetxt.onclick = () => {
  txt.value = "value is set programmetically.";
  // 手动触发input事件
  txt.dispatchEvent(new Event('input'));
  // 如果需要触发change事件也可以加上
  // txt.dispatchEvent(new Event('change'));
}

这样原本绑定的oninput回调就会正常执行了。

方法二：用MutationObserver监听属性变化 #

如果你没法直接修改设置value的代码（比如第三方库或多处修改），可以用MutationObserver来监听textarea的value属性变化，一旦检测到修改就执行后续任务。

示例代码：

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.attributeName === 'value') {
      // 这里执行你的后续任务
      alert("textarea changed (programmetically)");
    }
  });
});

// 配置监听选项：监听属性变化，指定只监听value属性
observer.observe(txt, {
  attributes: true,
  attributeFilter: ['value']
});

// 当不需要监听时记得销毁
// observer.disconnect();

方法三：封装设置值的函数 #

统一管理textarea的赋值操作，写一个专门的函数来设置值并执行后续任务，所有修改都通过这个函数来做，避免分散处理。

示例：

function setTextareaValue(element, newValue) {
  element.value = newValue;
  // 执行你的后续任务
  alert("textarea changed (via setTextareaValue)");
}

// 使用时调用这个函数
changetxt.onclick = () => {
  setTextareaValue(txt, "value is set programmetically.");
}

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