如何在文本框值变化时调用JavaScript自定义函数并传递新值？

嘿，这个问题其实挺常见的——要同时覆盖用户交互和代码修改两种场景确实需要结合不同的方法，我来给你拆解一下：

1. 处理用户交互触发的变化 #

对于用户手动输入、粘贴、删除这些操作，input 事件是最靠谱的——它会在文本框值实时变化时触发，比change事件（仅失去焦点时触发）更及时。

示例代码：

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

// 监听用户交互的输入变化
textbox.addEventListener('input', () => {
  updatedText(textbox.value);
});

补充：如果还需要处理下拉选择类的文本框（比如<input type="text">配合datalist），input事件也能完美覆盖到。

2. 处理代码修改触发的变化 #

当通过JS代码直接修改textbox.value时，input或change事件不会自动触发，这时候需要用MutationObserver来监听元素的value属性变化。

示例代码：

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    // 检查是否是value属性发生了变化
    if (mutation.type === 'attributes' && mutation.attributeName === 'value') {
      updatedText(textbox.value);
    }
  });
});

// 启动监听，指定要观察的属性
observer.observe(textbox, { attributes: true });

注意：如果你的代码是通过setAttribute('value', '新值')修改的，上面的监听完全有效；如果是直接赋值textbox.value = '新值'，有些浏览器可能不会触发属性变化的Mutation（因为value是DOM元素的属性，不是HTML属性），这时候可以手动触发input事件，或者封装一个修改值的函数：

function setTextboxValue(newValue) {
  textbox.value = newValue;
  // 手动触发input事件，让监听用户交互的逻辑也能响应
  textbox.dispatchEvent(new Event('input'));
}

3. 完整的组合方案 #

把两种方法结合起来，就能覆盖所有场景了：

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

// 自定义处理函数
function updatedText(newValue) {
  console.log('文本框值更新了:', newValue);
  // 这里写你的业务逻辑
}

// 监听用户交互
textbox.addEventListener('input', () => {
  updatedText(textbox.value);
});

// 监听代码修改（属性变化）
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.attributeName === 'value') {
      updatedText(textbox.value);
    }
  });
});
observer.observe(textbox, { attributes: true });

// 可选：封装修改值的函数，确保代码修改时也能触发逻辑
function updateTextboxValue(newVal) {
  textbox.value = newVal;
  textbox.dispatchEvent(new Event('input'));
}

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