案发现场：按个回车，页面没了？

前几天在搞一个后台管理系统的搜索功能，测试小哥跑来找我，说：“你这搜索框怎么一按回车，整个页面就白屏刷新了？”

我当时心里一紧，心想不至于吧，我明明只写了触发搜索的请求逻辑，没写刷新页面的代码啊。自己上手一敲回车，好家伙，真刷新了，刚才填的表单数据全没了。

破案了：都是 <form> 惹的祸

排查了一圈业务代码，没发现哪里偷偷调了 location.reload() 或者路由跳转。后来打开 DevTools 仔细看了一眼 DOM 结构，发现这个输入框是被包在一个 <form> 标签里的。

这时候才恍然大悟：这根本不是 JS 代码的锅，而是 HTML 的“祖传手艺”。

在 <form> 表单中，如果你按下 Enter 键，浏览器会默认触发表单提交（Submit） 行为。特别是当表单里只有一个单行输入框，或者没有显式指定 action 属性时，它默认就会向当前 URL 发起提交，表现出来的结果就是——页面原地刷新。

怎么治？阻止它的“自作主张”

既然知道了是浏览器的默认行为在作祟，那解决思路就很清晰了：拦截它。

我们只需要在输入框上监听键盘事件，当用户按下 Enter 键时，手动调用 event.preventDefault() 把默认行为掐断就行了。

这里给一个 Vue3 Composition API 环境下的实操示例：

import { onMounted, ref } from 'vue'


const baseCustomInputRef = ref(null)


// 封装键盘事件处理函数
const emitKeyDownEvent = (event) => {
  if (event.key === 'Enter') {
    // 核心：阻止表单默认的提交刷新行为
    event.preventDefault()
  }
  // 继续向外抛出事件，不影响其他业务逻辑
  emit('keydown', event)
}


onMounted(() => {
  // 绑定到真实的 DOM 节点上
  if (baseCustomInputRef.value) {
    baseCustomInputRef.value.addEventListener('keydown', emitKeyDownEvent)
  }
})

import { onBeforeUnmount } from 'vue'


onBeforeUnmount(() => {
  if (baseCustomInputRef.value) {
    baseCustomInputRef.value.removeEventListener('keydown', emitKeyDownEvent)
  }
})