js怎样监听输入框变化 input事件监听实现实时输入反馈技巧

const inputElement = document.getElementById('yourInputId');

inputElement.addEventListener('input', function(event) {
  const inputValue = event.target.value;
  console.log('输入框内容:', inputValue);
  // 在这里执行你想要的操作，例如实时搜索、数据验证等
});

function debounce(func, delay) {
  let timeout;
  return function(...args) {
    const context = this;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), delay);
  };
}

const debouncedInputHandler = debounce(function(event) {
  console.log('防抖处理:', event.target.value);
  // 在这里执行你的操作
}, 300); // 300毫秒延迟

inputElement.addEventListener('input', debouncedInputHandler);

function throttle(func, limit) {
  let inThrottle;
  return function(...args) {
    const context = this;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

const throttledInputHandler = throttle(function(event) {
  console.log('节流处理:', event.target.value);
  // 在这里执行你的操作
}, 200); // 200毫秒间隔

inputElement.addEventListener('input', throttledInputHandler);

if ('onpropertychange' in inputElement) {
  inputElement.addEventListener('propertychange', function(event) {
    if (event.propertyName === 'value') {
      console.log('propertychange:', inputElement.value);
      // 在这里执行你的操作
    }
  });
}

inputElement.addEventListener('compositionstart', function() {
  // 中文输入法开始输入
  console.log('compositionstart');
  isComposing = true;
});

inputElement.addEventListener('compositionupdate', function() {
  // 中文输入法输入内容更新
  console.log('compositionupdate');
});

inputElement.addEventListener('compositionend', function() {
  // 中文输入法输入结束
  console.log('compositionend');
  isComposing = false;
  // 在这里执行你想要的操作，确保只处理最终的输入结果
  console.log('中文输入完成:', inputElement.value);
});

inputElement.addEventListener('input', function(event) {
  if (!isComposing) {
    console.log('非中文输入:', event.target.value);
    // 在这里执行你想要的操作，只处理非中文输入
  }
});