在表单交互中，input 元素的 change 事件通常用于监听值变更后的提交或校验逻辑，但默认情况下，用户按 Enter 键可能意外触发该事件；本文介绍通过 preventDefault() 阻止 Enter 键引发的 change 行为，同时保留其他场景下 change 的正常触发。
在表单交互中，`input` 元素的 `change` 事件通常用于监听值变更后的提交或校验逻辑，但默认情况下，用户按 enter 键可能意外触发该事件；本文介绍通过 `preventdefault()` 阻止 enter 键引发的 `change` 行为，同时保留其他场景下 `change` 的正常触发。
HTML 中的 <input> 元素在失去焦点（blur）且值发生改变时会触发 change 事件。但需注意：Enter 键本身并不会直接触发 change——真正导致问题的是某些浏览器（尤其是 Chrome 和 Edge）在 <form></form> 内的 <input> 按下 Enter 后自动提交表单，进而引发输入框失焦（blur），最终间接触发 change。因此，单纯监听 keyup 并调用 e.preventDefault() 并不能完全拦截 change，关键在于阻止表单默认提交行为，并合理控制事件时机。
以下是推荐的解决方案：
✅ 正确做法：阻止表单提交 + 显式控制 change 触发
<form id="myForm"> <input id="inp" type="text" /> </form>
const inp = document.querySelector("#inp");
const form = document.querySelector("#myForm");
// 保留 change 事件用于 blur 场景（如鼠标离开、Tab 切换等）
inp.addEventListener("change", (e) => {
console.log("Change triggered (value:", e.target.value, ")");
});
// 拦截 Enter 键：阻止表单提交，避免间接触发 change
form.addEventListener("submit", (e) => {
e.preventDefault(); // 关键：阻止整个表单提交
console.log("Enter pressed — form submission prevented");
// 此处可手动触发搜索、提交 API 等自定义逻辑
});⚠️ 注意：原答案中在
keyup中调用e.preventDefault()是无效的，因为keyup事件本身不具有可取消的默认行为（preventDefault()对keyup无实际作用），且它无法阻止后续的 blur → change 流程。真正需要拦截的是submit事件（当 input 在 form 内时）。
? 补充说明：何时 change 会被触发？
- ✅ 用户编辑后点击页面其他区域（失焦）
- ✅ 编辑后按 Tab 键切换到下一字段
- ✅ 调用
inp.blur()手动失焦 - ❌ 单纯按 Enter 键（除非在 form 内导致 submit → blur）
? 进阶建议：完全解耦 change 逻辑
若需更精细控制（例如仅在用户明确“确认”时才执行业务逻辑），可放弃依赖原生 change，改用自定义事件或显式按钮触发：
inp.addEventListener("keyup", (e) => {
if (e.key === "Enter") {
e.preventDefault();
handleConfirm(inp.value); // 自定义确认处理函数
}
});
function handleConfirm(value) {
console.log("Confirmed value:", value);
// 执行搜索、提交、校验等逻辑，而非依赖 change
}这样既规避了 change 的语义歧义，又提升了交互可控性与可测试性。
总结：不要在 keyup 中对 Enter 调用 preventDefault() 试图拦截 change；应定位根本原因（表单自动提交），通过 form.submit 事件阻止，并根据实际需求选择使用原生 change 或更明确的自定义触发机制。
