HTML按钮响应回车键的核心是确保其在正确上下文中被键盘自然激活：优先用form内type="submit"按钮实现原生回车提交；输入框独立时需监听Enter键并preventDefault()后调用.click()；按钮获焦点时Enter/空格自动触发click。
让 HTML 按钮响应回车键，核心不是“给按钮加事件”，而是**确保按钮在正确上下文中被键盘自然激活**。多数情况下，你不需要写 JS 就能实现；只有结构不标准时，才需少量监听补救。
优先用表单原生行为（最简单可靠）
如果按钮用于提交操作（如搜索、登录、确认），把它放进 <form> 里，并设为 type="submit"：
- 浏览器会自动让回车键触发这个按钮，无需任何 JS
- 输入框必须是
<input>或<textarea>，且处于焦点状态 - 页面中第一个
<button type="submit">会被默认激活（按 HTML 顺序，非视觉顺序） - 记得给按钮明确的
type="submit"—— 不写 type 的 button 在 form 内会被当成 submit，容易误触取消按钮
输入框独立于表单？手动监听 Enter 键
当搜索框、聊天输入框等未包裹在 <form> 中时，需监听其 keydown 事件：
- 用
event.key === 'Enter'判断（比 keyCode 更现代） - 必须调用
event.preventDefault()，否则可能换行或引发意外跳转 - 再调用目标按钮的
.click()，复用原有点击逻辑 - 推荐批量绑定：
document.querySelectorAll('input, textarea')统一处理，避免漏掉新添加的输入框
按钮本身获得焦点时，回车/空格会自动点击
这是浏览器默认行为，但常被忽略：
立即学习“前端免费学习笔记（深入）”；
-
<button>默认可聚焦，按 Tab 键可到达它 - 一旦获得焦点，按 Enter 或空格键会自动触发
click事件 - 若不希望这样（比如按钮只是装饰或有其他用途），请设
tabindex="-1"或用<div role="button">替代 - 需要支持无障碍访问时，建议保留可聚焦性，并补充
role="button"和aria-label
避开常见陷阱
这些细节看似小，却常导致功能失效或体验断裂：
- 没加
event.preventDefault()→ 输入框中回车换行、表单意外提交、页面刷新 - 按钮被
disabled或readonly→ 回车无法触发，即使 DOM 存在 - 多个 submit 按钮共存 → 回车只认第一个（源码顺序），隐藏按钮也参与排序
- 用
form.submit()或button.click()手动提交 → 绕过submit事件，表单验证、AJAX 提交逻辑失效
