HTML/JS输入框回车事件失效及数组匹配功能修复求助

原代码的核心问题 #

• 事件绑定错误：给input.value绑定事件，而非input元素本身，导致回车键事件无法触发
• 输入值获取时机错误：页面加载时就获取空值，没有实时获取用户输入内容
• 语法错误：if语句缺少右括号，导致JS代码执行中断
• 判断逻辑偏差：原代码判断数组是否包含输入值，不符合“输入内容包含数组任意词条”的需求
• 函数参数冗余：调用函数时未传参，且参数与全局变量重名

修正后的完整代码 #

<html>
  <link rel="stylesheet" href="Capillarystyle.css" />
  <body>
    <p>&lt;c.o.i informational terminal&gt;<br>this is a local database. be sure to update before each descent.<br>last updated 15:57:15 03/378<br><br> 
      <input type="text" id="name" name="fname" autocomplete="off" autofocus><br>
    </p>
    <p id="demo"></p>
    
    <script>
      // 给input元素绑定回车键事件
      document.getElementById("name").addEventListener("keydown", function(event) {
        if (event.key === "Enter") {
          event.preventDefault();
          checkQuery(); // 调用处理函数
        }
      });

      const maraQuery = ["mara", "Mara", "Quintana", "quintana", "Quin", "quin"];

      function checkQuery() {
        // 实时获取用户输入的内容
        const queryName = document.getElementById("name").value.trim();
        // 检查输入内容是否包含数组中的任意词条
        const hasMatch = maraQuery.some(word => queryName.includes(word));
        
        if (hasMatch) {
          window.open("Mara.html", "_self");
        } else {
          document.getElementById("demo").textContent = "No Results";
        }
      }
    </script>
  </body>
</html>

关键修复说明 #

• 事件绑定：去掉.value，直接给#name元素绑定keydown事件，确保回车键能触发函数
• 输入值获取：在checkQuery函数内部用.value获取实时输入内容，并用trim()去除首尾空格
• 语法修正：补全if语句的右括号，避免代码报错中断
• 逻辑调整：用Array.some()方法遍历数组，判断输入内容是否包含数组中的任意一个词条，符合需求
• 函数优化：重命名函数为更语义化的checkQuery，去掉冗余参数，逻辑更清晰
• 细节优化：autofocus属性不需要写="on"，直接写autofocus即可；设置结果时用textContent比innerHTML更安全

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