如何在 JavaScript 搜索功能中监听回车键（Enter）触发搜索-js教程-PHP中文网

如何在 JavaScript 搜索功能中监听回车键（Enter）触发搜索

本文讲解如何为输入框添加回车键（enter）事件监听，使其在用户按下 enter 时自动执行搜索逻辑，替代手动点击按钮，提升交互体验。

本文讲解如何为输入框添加回车键（enter）事件监听，使其在用户按下 enter 时自动执行搜索逻辑，替代手动点击按钮，提升交互体验。

在当前的搜索功能中，你已通过 click 事件绑定搜索逻辑（如筛选 .product-name 并控制 .card 的显隐），但该逻辑仅响应按钮点击。要支持键盘操作——尤其是用户习惯性按 Enter 提交搜索——需将相同逻辑绑定到输入框的 keydown（或 keyup）事件，并检测按键码是否为回车（Enter 键码为 13）。

✅ 推荐使用 keydown 事件：它在按键按下瞬间触发，响应及时，且能可靠捕获 Enter；相比 keypress（已废弃且不兼容部分现代浏览器）和 keyup（存在轻微延迟），keydown 是最稳妥的选择。

以下是完整、可直接集成的实现代码：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

// 获取搜索输入框元素（注意：不是搜索按钮！）
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");
    }
  });
}

? 关键注意事项：