keyup事件监听后为什么有时候不触发？

仙仙 Dev 提问于 2026-03-18 19:53:15 阅读 3

交互

我在做一个输入框的实时搜索功能，绑定了 keyup 事件，但有时候快速输入或者按回车的时候，事件好像没触发，控制台也没输出。是不是我写法有问题？

这是我目前的代码：

const input = document.getElementById('search');
input.addEventListener('keyup', (e) => {
  console.log('按键释放:', e.key);
  // 后续会调用搜索函数
});

我来解答赞 5 收藏

反馈

1 条解答

翼杨（打工版） Lv1

你的代码写法本身没问题，keyup 事件不触发主要有两种常见原因：

第一个是回车键的问题。如果你的输入框在 form 里面，按回车会触发表单提交，页面直接刷新了或者跳转了，keyup 的回调还没执行完就被中断了。这种情况你需要在事件里阻止默认行为：

const input = document.getElementById('search');

input.addEventListener('keyup', (e) => {

  if (e.key === 'Enter') {

    e.preventDefault(); // 阻止表单提交

  }

  console.log('按键释放:', e.key);

});

或者直接给 form 标签加个阻止提交的监听：

document.querySelector('form').addEventListener('submit', (e) => {

  e.preventDefault();

});

第二个是快速输入的问题。keyup 在快速连按的时候确实可能丢事件，因为前一个按键的 keyup 还没来得及触发，后一个按键就按下去了。

这种情况下建议用 input 事件替代 keyup，input 事件在任何输入变化时都会触发，包括粘贴、删除、输入等，比 keyup 可靠多了：

const input = document.getElementById('search');

input.addEventListener('input', (e) => {

  console.log('输入内容:', e.target.value);

});

如果你需要做实时搜索，记得加个防抖（debounce），避免每次输入都发请求：

function debounce(fn, delay) {

  let timer;

  return function(...args) {

    clearTimeout(timer);

    timer = setTimeout(() => fn.apply(this, args), delay);

  };

}



input.addEventListener('input', debounce(() => {

  console.log('发起搜索');

  // 这里调用搜索接口

}, 300));

基本上就是这两个坑，回车问题十有八九是表单提交的锅，希望能帮到你！

2026-03-18 20:00