本文讲解如何为输入框添加回车键（enter）事件监听，使其在用户按下 enter 时自动执行搜索逻辑，替代手动点击按钮，提升交互体验。
本文讲解如何为输入框添加回车键（enter）事件监听，使其在用户按下 enter 时自动执行搜索逻辑，替代手动点击按钮，提升交互体验。
在当前的搜索功能中，你已通过 click 事件绑定搜索逻辑（如筛选 .product-name 并控制 .card 的显隐），但该逻辑仅响应按钮点击。要支持键盘操作——尤其是用户习惯性按 Enter 提交搜索——需将相同逻辑绑定到输入框的 keydown（或 keyup）事件，并检测按键码是否为回车（Enter 键码为 13）。
✅ 推荐使用 keydown 事件：它在按键按下瞬间触发，响应及时，且能可靠捕获 Enter；相比 keypress（已废弃且不兼容部分现代浏览器）和 keyup（存在轻微延迟），keydown 是最稳妥的选择。
以下是完整、可直接集成的实现代码：
// 获取搜索输入框元素（注意：不是搜索按钮！）
const searchInputEl = document.getElementById("search-input");
// 绑定键盘事件监听
searchInputEl.addEventListener("keydown", (e) => {
// 检测是否按下 Enter 键（兼容旧版 IE 的 keyCode 与现代标准的 key）
if (e.key === "Enter" || e.keyCode === 13 || e.which === 13) {
e.preventDefault(); // 阻止表单默认提交（如有父表单），避免页面刷新
// 复用原有搜索逻辑（已提取为独立函数，便于复用）
performSearch();
}
});
// 将原搜索逻辑封装为可复用函数
function performSearch() {
const searchTerm = document.getElementById("search-input").value.trim();
const elements = document.querySelectorAll(".product-name");
const cards = document.querySelectorAll(".card");
// 若搜索词为空，可选择清空结果或显示全部（按需调整）
if (!searchTerm) {
cards.forEach(card => card.classList.remove("hide"));
return;
}
elements.forEach((element, index) => {
// 不区分大小写匹配（比 toUpperCase() 更健壮）
const matches = element.textContent.toLowerCase().includes(searchTerm.toLowerCase());
if (matches) {
cards[index].classList.remove("hide");
} else {
cards[index].classList.add("hide");
}
});
}? 关键注意事项：
立即学习“Java免费学习笔记（深入）”；
- ✅ 确保监听的是 <input id="search-input">，而非按钮 #search；
- ✅ 使用 e.preventDefault() 防止意外表单提交；
- ✅ 优先使用 e.key === "Enter" 判断（语义清晰、现代标准），keyCode/which 作为降级兼容；
- ✅ 将搜索逻辑抽离为 performSearch() 函数，既避免重复代码，也便于后续扩展（例如同时支持按钮点击和 Enter 触发）；
- ⚠️ 若输入框位于 <form> 内，建议为表单添加 onsubmit="return false;" 或监听 submit 事件并阻止默认行为，双重保障。
通过以上改造，用户在输入关键词后按 Enter 即可即时筛选商品卡片，交互更自然、专业，符合现代 Web 应用的最佳实践。
