JavaScript商品搜索练习中如何检测Enter键按下事件？

可以把重复的搜索逻辑封装成独立函数，同时给输入框添加键盘事件监听来捕获Enter键操作，具体代码如下：

// 封装搜索逻辑为独立函数
function handleSearch() {
  // 获取并转换输入内容为大写（统一匹配规则）
  const searchInput = document.getElementById("search-input").value.toUpperCase();
  const productNames = document.querySelectorAll(".product-name");
  const productCards = document.querySelectorAll(".card");

  productNames.forEach((nameElement, index) => {
    // 对比商品名称和输入内容
    if (nameElement.innerText.toUpperCase().includes(searchInput)) {
      productCards[index].classList.remove("hide");
    } else {
      productCards[index].classList.add("hide");
    }
  });
}

// 绑定搜索按钮点击事件
document.getElementById("search").addEventListener("click", handleSearch);

// 绑定输入框Enter键触发事件
document.getElementById("search-input").addEventListener("keydown", (e) => {
  // 判断是否按下Enter键
  if (e.key === "Enter") {
    handleSearch();
  }
});

关键说明 #

• 封装handleSearch函数，让点击按钮和回车操作复用同一逻辑，减少冗余代码
• 统一将输入内容和商品名称转换为大写，避免大小写敏感导致的匹配问题
• 通过keydown事件监听输入框，当检测到按下Enter键时触发搜索

内容的提问来源于stack exchange，提问作者Alan GH