表单内button元素click与Enter事件异常行为及实现方案咨询

问题根因 #

• 表单默认行为触发：你的HTML中的<form>标签内包含type="submit"的按钮时，在输入框按下回车会默认触发提交按钮的click事件，这是你控制台第一次输出inside submitButton click event handler的来源
• 手动重复触发：你在密码输入框的keyup监听中又主动调用了submitButton.click()，导致第二次触发点击事件
• 选择器错误：你的HTML中密码输入框只有name="password"属性，未设置id="password"，document.querySelector("#password")实际无法获取到正确的密码输入框元素，这也是你之前遇到回车触发时灵时不灵的核心原因之一
• keyCode属性已被W3C废弃，兼容性差，推荐使用e.key判断按键

修复方案 #

实现思路：阻止表单默认的回车提交行为，修正输入框选择器，同时给用户名、密码输入框统一绑定逻辑，确保按下回车时先阻止默认行为，手动控制焦点转移和点击触发，全程仅触发一次点击事件。

修正后代码 #

无需改动原有HTML结构，JS代码修改如下：

document.addEventListener("DOMContentLoaded", () => {
  const submitButton = document.querySelector(".form__button");
  // 修正选择器，同时选中用户名、密码两个输入框
  const inputFields = document.querySelectorAll(".form__input");
  const form = document.querySelector(".form");

  // 阻止表单默认提交行为，避免页面刷新
  form.addEventListener("submit", e => e.preventDefault());

  submitButton.addEventListener("click", e => {
    console.log("inside submitButton click event handler");
    // 你的提交逻辑写在这里即可
  });

  inputFields.forEach(input => {
    // 单独给密码框绑定blur事件
    if (input.name === "password") {
      input.addEventListener("blur", e => {
        console.log("passwordInputField lost focus");
      });
    }

    // 给所有输入框绑定回车监听
    input.addEventListener("keydown", e => {
      if (e.key === "Enter") {
        // 阻止默认的回车提交行为，避免重复触发点击
        e.preventDefault();
        // 先转移焦点到按钮，自动触发输入框的blur事件
        submitButton.focus();
        // 触发按钮点击
        submitButton.click();
      }
    });
  });
});

效果说明 #

修改后无论在用户名还是密码输入框按下回车，都会先将焦点转移到提交按钮，触发密码框的blur事件，且仅触发一次按钮点击事件，和手动点击按钮的行为完全一致。

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