原生JS如何监听条形码扫描填充的productName输入框值变动

有两种比轮询性能好得多的实现方案，按需选择即可：

方案1：监听input事件（优先使用，代码最简洁） #

如果条形码扫描功能填充输入框时会触发标准输入事件，直接用这个方案即可：

const productNameInput = document.getElementById('productName');
const quantityInput = document.getElementById('quantity');

productNameInput.addEventListener('input', () => {
  const inputVal = productNameInput.value.trim();
  if (inputVal) {
    // 此处可替换为你自定义的取值解析逻辑
    quantityInput.value = inputVal;
  }
});

这个方案的缺点是如果扫码功能是直接静默修改输入框value属性、没有触发输入事件的话，会监听不到变化，这种情况用方案2。

方案2：MutationObserver监听DOM变化（兼容性强，性能最优） #

这是替代轮询的最优方案，基于浏览器原生的DOM变化监听接口实现，只有当目标输入框的属性发生变化时才会触发回调，没有任何多余的定时查询开销，完全不会浪费性能：

const productNameInput = document.getElementById('productName');
const quantityInput = document.getElementById('quantity');

// 初始化DOM变化观察者
const valueObserver = new MutationObserver((mutationList) => {
  for (const mutation of mutationList) {
    if (mutation.attributeName === 'value') {
      const currentVal = productNameInput.value.trim();
      if (currentVal) {
        // 此处可替换为你自定义的取值解析逻辑
        quantityInput.value = currentVal;
        // 如果只需要处理第一次填充，填充完成后可直接断开观察者释放资源
        valueObserver.disconnect();
      }
    }
  }
});

// 配置监听规则：仅监听输入框的value属性变化
valueObserver.observe(productNameInput, {
  attributes: true,
  attributeFilter: ['value']
});

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