必须监听 input 的 keydown 事件并用 event.preventDefault() 阻止默认行为，用 event.key === "Enter" 判断回车键；textarea 需区分 Shift+Enter 换行与 Enter 发送；React 中推荐 useCallback 或内联函数避免闭包陷阱；Vue 应使用 @keydown.enter.prevent。
监听 input 的 keydown 事件判断 Enter 键
回车键触发逻辑不能靠 type="submit" 或表单自动提交来兜底，尤其在非表单场景（如搜索框、聊天输入）中，必须手动捕获键盘行为。核心是监听 keydown，而非 keyup 或 input —— 因为 keydown 能最早拦截并阻止默认行为（比如意外换行或表单提交）。
常见错误是绑定在 input 元素上却忘了加 event.preventDefault()，导致 textarea 换行或 form 提交；或者误用 keypress（已废弃且对 Enter 兼容差）。
- 使用
event.key === "Enter"判断，比event.keyCode === 13更现代、语义清晰 - 务必在回调中调用
event.preventDefault()，否则可能触发浏览器默认行为 - 若 input 在 form 内，又不想提交表单，必须阻止事件冒泡到 form 或直接禁用 form 的 submit 行为
textarea 中回车键的特殊处理
textarea 默认支持换行，按 Enter 会插入 \n。如果想把它当作“发送”操作（比如聊天输入框），就必须阻止默认换行，并手动触发业务逻辑。
这时候仅监听 keydown 不够：用户可能用 Ctrl+Enter 发送、Shift+Enter 换行，得区分修饰键。
立即学习“前端免费学习笔记（深入）”；
-
event.key === "Enter" && !event.shiftKey→ 触发发送，event.preventDefault() -
event.key === "Enter" && event.shiftKey→ 允许换行，不阻止 - 注意移动端软键盘的 “Enter” 键文案可能是“发送”“搜索”等，
event.key仍为"Enter"，但部分 Android WebView 有兼容问题，需实测
React 中避免重复绑定和闭包陷阱
在函数组件中用 useEffect 或直接在 JSX 里写 onKeyDown 都可以，但容易踩两个坑：一是每次渲染都新建事件函数导致 ref 绑定失效；二是事件处理器闭包捕获了过期的 state。
推荐直接在 JSX 中使用内联箭头函数（简单场景），或用 useCallback 包裹（复杂逻辑 + 依赖 state）：
<input
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault();
handleSubmit(); // 这里要确保 handleSubmit 是稳定引用
}
}}
/>
- 不要在
useEffect里反复addEventListener，除非你手动清理，否则会叠加监听器 - 如果
handleSubmit依赖 props 或 state，又没用useCallback，会导致执行时取到旧值 - SSR 场景下，服务端没有
KeyboardEvent，所以判断逻辑必须放在客户端安全的位置（比如useEffect或事件触发时）
Vue 中 v-keypress 已废弃，改用 v-keydown
Vue 2 的 v-keypress.enter 在 Vue 3 中不再支持，官方明确推荐用 v-keydown.enter。它本质是语法糖，编译后仍是监听 keydown 并匹配 key。
但要注意：这个修饰符不会自动 preventDefault，该阻止还得自己写。
- 写法：
<input>，其中.prevent就是event.preventDefault() - 如果需要组合键，比如
@keydown.ctrl.enter，Vue 会正确识别ctrlKey和key - 自定义指令（如
v-enter）容易掩盖原生行为，不如直接用原生事件清晰可控
input 事件还没发生，但 keydown 已触发——所以业务逻辑里需要检查当前输入值是否已更新，必要时延后执行或结合 compositionend 做兼容。 
