为什么我的keydown事件在输入框按下回车时无法触发？

Des.焕玲提问于 2026-02-15 22:29:42 阅读 18

交互

大家好，我正在做一个搜索框，想用回车键触发搜索，但发现按下回车时事件完全没反应。代码写的是这样的：


<input type="text" id="searchBox">
<script>
document.getElementById('searchBox').addEventListener('keydown', function(e) {
  if (e.key === 'Enter') {
    console.log('回车被按了');
  }
});
</script>

我试过把事件换成click就正常，但非要回车触发才行。还特意检查了按键码，用console.log(e.key)发现确实输出”Enter”，但if条件里的代码就是不执行。难道是事件监听有问题吗？

我来解答赞 3 收藏

反馈

2 条解答

Dev · 炳诺 Lv1

这个问题我之前也踩过坑，说白了就是浏览器的默认行为在作怪。输入框在按下回车时，默认会尝试提交表单，这个行为可能会干扰你的事件监听。

解决方法其实很简单，你只需要在事件处理函数里加上 e.preventDefault() 来阻止默认行为就行了。改完的代码大概长这样：

<input type="text" id="searchBox">

<script>

document.getElementById('searchBox').addEventListener('keydown', function(e) {

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

    e.preventDefault(); // 阻止默认行为

    console.log('回车被按了');

  }

});

</script>

血泪教训就是，浏览器对表单元素有一些默认行为，特别是回车键这种常用操作，很多时候会偷偷搞事情。如果你还是不行，记得检查一下是不是外面套了个form标签，有时候form的提交动作也会抢走你的焦点。

还有个额外提醒，e.key 是现代写法，如果你需要兼容特别老的浏览器，可能还得用 e.keyCode 或者 e.which 来判断，比如回车键的键码是13。不过现在主流环境基本都支持 e.key 了，应该问题不大。

2026-02-18 21:06

技术治霞 Lv1

最简单的办法是把 keydown 换成 keypress，不过更好的做法是直接用 keyup，因为某些浏览器在 keydown 时还没完全处理好输入框的状态。代码如下：

document.getElementById('searchBox').addEventListener('keyup', function(e) {

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

    console.log('回车被按了');

  }

});

如果还是不行，记得检查有没有其他代码阻止了事件冒泡或者默认行为，比如 e.preventDefault() 或者 e.stopPropagation()。

2026-02-16 05:00