JavaScript搜索输入框keypress事件监听器未触发问题排查

开发名为MyStok的股票市场网站时，尝试实现按下Enter键触发搜索的功能，但keypress事件监听器未触发，按下Enter键或点击搜索按钮时控制台无任何输出，且无报错信息。预期按下Enter键时控制台输出"Enter key pressed"。

代码示例 #

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MyStok</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
          integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
          crossorigin="anonymous" referrerpolicy="no-referrer"/>
</head>
<body>
<nav class="navbar">
    <div class="navbar__container">
        <a id="navbar__logo"><i class="fa-solid fa-chart-line"></i> MyStok </a>
        <div class="navbar__toggle" id="mobile-menu">
            <span class="bar"></span> <span class="bar"></span>
            <span class="bar"></span>
        </div>
        <ul class="navbar__menu">
            <li class="navbar__item"><a href="/MyStok/index.html" class="navbar__links">Home</a></li>
            <li class="navbar__item"><a href="/MyStok/about.html" class="navbar__links">About Us</a></li>
            <li class="navbar__item"><a href="/MyStok/analyse.html" class="navbar__links" id="analyseButton">Analyse</a></li>
            <li class="navbar__button"><a href="/MyStok/signUp.html" class="button">Log In</a></li>
        </ul>
    </div>
</nav>
<div class="main">
    <div class="main__container">
        <div class="search-bar-container">
            <a id="search-logo"><i class="fa-solid fa-chart-line"></i> MyStok </a>
            <div class="search-bar">
                <input type="search" id="search-input" placeholder="Search for a Stock Ticker...">
                <button id="search-button"><i class="fa-solid fa-magnifying-glass"></i></button>
            </div>
        </div>
    </div>
</div>
<script src="app.js"></script>
</body>
</html>

JavaScript代码（原代码）

searchInput = document.getElementById("search-input");

searchInput.addEventListener("keypress", function(event) {
    if (event.key === "Enter") {
        console.log("Enter key pressed");
    }
});

解决方案 #

1. 替换keypress事件为keydown
keypress已被标记为废弃，部分浏览器对Enter键的捕获支持不佳，keydown能稳定捕获所有按键事件，包括Enter键。

2. 确保DOM加载完成后绑定事件
   添加DOMContentLoaded事件监听，彻底避免因元素未加载完成导致的null绑定问题。

3. 添加搜索按钮的点击事件监听
   统一用一个处理函数覆盖按键和点击两种触发场景，同时解决按钮点击无输出的问题。

修改后的JavaScript代码 #

document.addEventListener('DOMContentLoaded', function() {
  const searchInput = document.getElementById("search-input");
  const searchButton = document.getElementById("search-button");

  // 监听Enter键触发
  searchInput.addEventListener("keydown", function(event) {
    if (event.key === "Enter") {
      handleSearch();
    }
  });

  // 监听搜索按钮点击触发
  searchButton.addEventListener("click", handleSearch);

  // 统一搜索处理函数
  function handleSearch() {
    console.log("Enter key pressed or search button clicked");
    // 此处可添加实际的搜索逻辑
  }
});

说明 #

• 改用keydown后，Enter键的触发会更稳定，不会出现事件丢失的情况。
• DOMContentLoaded确保所有DOM元素加载完成后再执行绑定操作，避免searchInput为null的潜在问题。
• 统一的handleSearch函数让代码更易维护，同时覆盖两种触发方式，符合预期需求。

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