HTML搜索框回车键执行搜索避免页面刷新

默认情况下，当用户在HTML表单中按下回车键时，浏览器会触发表单提交并刷新页面。若想实现“按回车即搜索”的效果，必须阻止表单的默认提交行为，并通过JavaScript接管搜索逻辑。

许多刚接触前端开发的朋友常常会遇到这样的场景：在表单的输入框中输入关键词后，习惯性地按下回车键，结果页面却刷新了，输入的内容也被清空。明明是想执行搜索，浏览器却误认为是“提交并刷新”。问题根源在于HTML表单默认的提交行为——如果没有进行特殊处理，浏览器就会按照默认规则执行。

解决这个问题的核心思路非常明确：阻止表单的默认提交行为，改用JavaScript来控制搜索逻辑。

大多数开发者可能会写出类似下面的HTML结构：

但随后会发现，无论怎么按回车，搜索功能都没有生效。我们来回顾一下，是不是遗漏了某些关键步骤？例如，是否给表单添加了一个唯一的ID？是否监听了submit事件？是否在事件处理函数中调用了preventDefault()方法？

下面介绍正确的实现方法。

1. 为表单添加唯一ID并明确声明提交方式

这里的id="searchForm"是JavaScript绑定事件的前置条件。method="GET"虽然不强制，但符合搜索场景的语义。另外那个autofocus可以省去用户手动点击输入框的步骤，用户体验会更好。

2. 使用JavaScript拦截提交并执行自定义搜索逻辑

document.getElementById('searchForm').addEventListener('submit', function(event) {
  event.preventDefault(); // 关键：阻止页面刷新/跳转
  const query = this.elements.search.value.trim();
  if (!query) return; // 忽略空搜索
  console.log('Executing search for:', query);
  // 示例：调用搜索函数（如AJAX请求、路由跳转或DOM过滤）
  // performSearch(query);
});

最容易被忽略的关键点就是event.preventDefault()这一行——它是整个方案的基石。如果没有它，浏览器仍然会按默认行为执行，根本不会执行你自定义的搜索逻辑。

此外，还有几个细节值得注意：

• 一定要确保脚本在DOM加载完毕之后执行。推荐的做法是把