根本原因是表单原生提交行为未被拦截；回车时浏览器自动以GET方式提交表单导致页面刷新，需用event.preventDefault()阻止，并正确绑定form的submit事件而非input的keydown。
为什么回车一按就刷新页面
根本原因不是 JS 没写，而是表单的原生提交行为没被拦截。只要 <form> 里有 <input type="text">，哪怕没写 action、没放提交按钮，浏览器也会在回车时发起 GET 请求到当前 URL——结果就是整页重载，搜索逻辑根本没机会执行。
常见错误包括：onkeydown 里只判断 Enter 却忘了 event.preventDefault()；或给 <input> 绑了 keydown 后又手动调用 form.submit()，这会绕过 submit 事件监听器，导致 preventDefault() 失效。
- 表单必须有明确
id（如id="searchForm"），否则 JS 无法精准绑定 - 不要在
<input>上监听keydown来“实现”回车提交——这是多余且危险的 -
<textarea>是唯一需要单独拦截Enter的场景，其他输入框交给表单原生机制
正确绑定 submit 事件的三步实操
这是最稳定、语义最清晰、移动端软键盘“搜索”按钮也能识别的方式。
HTML 部分要带 id 和显式 method：
立即学习“前端免费学习笔记（深入）”；
<form id="searchForm" method="GET"> <input type="text" name="search" placeholder="Search..." required> </form>
JS 部分监听 submit，不是 click 或 keydown：
document.getElementById('searchForm').addEventListener('submit', function(event) {
event.preventDefault();
const searchTerm = this.elements.search.value.trim();
if (!searchTerm) return;
// ✅ 在这里调用你的搜索函数，比如 fetch('/api/search?q=' + searchTerm)
});-
this.elements.search比querySelector更可靠，能直接按name取值 - 加
required属性可防空提交，浏览器会自动校验 - 不用手动聚焦或调用
form.submit()，用户按回车自然触发
多个按钮共存时回车总点错第一个
问题不在 JS，而在 HTML 的 type 属性缺失。未声明 type 的 <button> 默认就是 type="submit"，浏览器会把 DOM 中第一个这样的按钮当作默认提交目标——哪怕它写着“取消”。
错误写法：
<form> <input type="text" name="q"> <button>Cancel</button> <!-- ❌ 默认是 submit --> <button type="submit">Search</button> </form>
正确写法（所有非提交按钮必须显式声明）：
<form id="searchForm"> <input type="text" name="q"> <button type="button" onclick="handleCancel()">Cancel</button> <button type="submit">Search</button> </form>
- 永远不要依赖 CSS 隐藏（
display: none）来“禁用”按钮的提交行为——它仍在 DOM 顺序中参与判定 -
<input type="button">安全但语义弱；<button type="button">支持内嵌 HTML，推荐优先使用 - 动态插入按钮时，确保 SSR 和客户端 hydration 一致，否则 React/Vue 可能出现类型错位
textarea 里按 Enter 要换行，不是提交
这是唯一需要监听 keydown 并干预 Enter 的场景。必须精确作用于 <textarea> 元素本身，不能绑在 <form> 或 window 上，否则会误杀其他输入框的合法提交。
const textarea = document.querySelector('textarea');
textarea.addEventListener('keydown', function(e) {
if (e.key === 'Enter' && !e.shiftKey && !e.ctrlKey && !e.altKey) {
e.preventDefault();
const start = this.selectionStart;
const end = this.selectionEnd;
const value = this.value;
this.value = value.slice(0, start) + '\n' + value.slice(end);
this.setSelectionRange(start + 1, start + 1);
}
});- 务必检查修饰键（
!e.shiftKey等），否则Shift+Enter无法换行 - 手动插入换行符时，要同步更新光标位置，否则光标会跳到末尾
- 别对
<input type="text">做同样操作——这会破坏表单原生回车提交体验
最容易被忽略的是按钮的 type 属性：不写不等于没有，默认就是 submit。很多“回车点错按钮”的问题，修复方式根本不需要一行 JS，只需要补上 type="button"。
