通过阻止表单默认提交行为（使用`event.preventDefault()`），用JavaScript接管搜索逻辑，可实现回车键触发搜索而不刷新页面。需为表单添加唯一ID，监听submit事件，并确保脚本在DOM加载后执行。
默认情况下，HTML表单在按下回车键时会触发表单提交并刷新页面；要实现“按回车即搜索”，必须阻止表单默认提交行为，并通过JavaScript接管搜索逻辑。
很多刚入门的朋友都会遇到这样一个场景：在表单的文本框里输入关键词，然后习惯性地敲下回车——结果页面刷新了一下，搜索框里的内容也清空了。明明是想要搜索，但浏览器却理解成了“提交并刷新”。问题出在哪里？就在于HTML表单默认就有这套提交机制，只要没有做特殊处理，它就会按默认流程执行。
要解决这个问题，核心思路非常清晰：禁止表单的默认提交行为，改用JavaScript来接管搜索逻辑。
长期稳定更新的攒劲资源： >>>点此立即查看<<<
多数开发者会写类似如下的结构：
然后发现不管怎么按回车，搜索就是不起作用。可以回想一下，是不是漏掉了某个步骤？比如是否给表单添加了唯一ID？是否监听了submit事件？是否在事件处理中调用了preventDefault()？
不妨试试下面的正确做法。
这里的id="searchForm"是JavaScript绑定事件的前置条件。method="GET"虽然不强制，但符合搜索场景的语义。另外那个autofocus可以省去用户手动点击输入框的步骤，体验上会提升不少。
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()这一行——它是整个方案的基石。没有它，浏览器还是会按自己的逻辑走，根本不会执行你编写的那套搜索逻辑。
另外还有几个小细节值得注意：