JS监听键盘Enter事件触发页面Enter div功能失效问题求助

配置PIN输入功能时，需要实现按下物理键盘Enter键时，触发页面中“Enter”按钮的提交交互。目前鼠标点击该Enter div时逻辑可正常运行，原本计划结合keypress事件监听器与逻辑或||运算符实现需求，但编写的代码始终无法正常生效，也不确定当前实现方向是否正确。
现有实现代码如下：

原有JavaScript代码 #

let display = document.getElementById("display");
let validKeys = [
  "1",
  "2",
  "3",
  "4",
  "5",
  "6",
  "7",
  "8",
  "9",
  "0",
  "Enter",
  "Clear",
];
let pin = "";

document.getElementById("pin-pad").addEventListener("click", (event) => {
  if (!validKeys.includes(event.target.innerText)) {
    return;
  }

  if (event.target.innerText === "Enter") {
    window.electronAPI.sendPin(pin);
    return;
  }

  if (event.target.innerText === "Clear") {
    pin = display.value = "";
    return;
  }

  pin = pin + event.target.innerText;
  display.value = "*".repeat(pin.length);
});

///tests
const handlekeyUp = function (e) {
  e.stopPropagation();
  const input = document.getElementById("display");
  console.log(input, e.key, input.value);
  var reg = new RegExp("^[0-9]$");
  const number = document.querySelector(`[data-number="${e.key}"]`);

  if (reg.test(e.key)) input.value += e.key;
  if (number) number.style.backgroundColor = "#fff";
};

const handleKeyDown = (e) => {
  const number = document.querySelector(`[data-number="${e.key}"]`);
  if (!number) {
    return;
  }
  number.style.backgroundColor = "#eee";
};

document.addEventListener("keyup", handlekeyUp);

document.addEventListener("keydown", handleKeyDown);

原有HTML代码 #

<div id="container">
  <div id="wrapper">
    <input type="password" id="display" disabled />

    <div id="pin-pad">
      <div data-number="1">1</div>
      <div data-number="2">2</div>
      <div data-number="3">3</div>
      <div data-number="4">4</div>
      <div data-number="5">5</div>
      <div data-number="6">6</div>
      <div data-number="7">7</div>
      <div data-number="8">8</div>
      <div data-number="9">9</div>
      <div>Enter</div>
      <div data-number="0">0</div>
      <div>Clear</div>
    </div>
  </div>
</div>

• 现有键盘事件逻辑仅处理了数字键的输入、按键按下高亮效果，完全没有编写Enter、Clear两个功能键的触发逻辑，按Enter自然不会执行提交
• 数字键的键盘输入逻辑直接修改display输入框的值，没有同步更新全局存储PIN值的pin变量，就算触发提交，发送的PIN内容也会和实际输入不一致
• keypress事件已被Web标准废弃，不需要强行使用该API，用现有的keydown/keyup事件即可实现需求
• 没有对Enter键做默认行为阻止，部分场景下会触发不必要的页面默认响应

将按钮点击的核心逻辑抽为公共处理函数，鼠标点击、键盘触发都复用同一套逻辑，避免重复代码；补充键盘事件中对Enter、Clear键的判断，修正数字键输入时的变量同步问题。
修复后的完整JavaScript代码如下（HTML无需修改）：

let display = document.getElementById("display");
let validKeys = [
  "1",
  "2",
  "3",
  "4",
  "5",
  "6",
  "7",
  "8",
  "9",
  "0",
  "Enter",
  "Clear",
];
let pin = "";

// 抽离公共按键处理逻辑，鼠标、键盘触发都复用
const handleKeyPress = (keyContent) => {
  if (!validKeys.includes(keyContent)) return;

  if (keyContent === "Enter") {
    window.electronAPI.sendPin(pin);
    return;
  }

  if (keyContent === "Clear") {
    pin = display.value = "";
    return;
  }

  pin = pin + keyContent;
  display.value = "*".repeat(pin.length);
}

// 鼠标点击逻辑
document.getElementById("pin-pad").addEventListener("click", (event) => {
  handleKeyPress(event.target.innerText.trim());
});

const handleKeyUp = function (e) {
  // 处理Enter键
  if (e.key === "Enter") {
    e.preventDefault();
    handleKeyPress("Enter");
    const enterBtn = Array.from(document.querySelectorAll('#pin-pad div')).find(el => el.innerText.trim() === 'Enter');
    if (enterBtn) enterBtn.style.backgroundColor = "#fff";
    return;
  }
  // 支持物理退格键触发Clear清空，不需要可删除该分支
  if (e.key === "Backspace") {
    handleKeyPress("Clear");
    const clearBtn = Array.from(document.querySelectorAll('#pin-pad div')).find(el => el.innerText.trim() === 'Clear');
    if (clearBtn) clearBtn.style.backgroundColor = "#fff";
    return;
  }

  var reg = new RegExp("^[0-9]$");
  const number = document.querySelector(`[data-number="${e.key}"]`);

  if (reg.test(e.key)) {
    // 复用公共逻辑处理数字输入，保证pin变量同步
    handleKeyPress(e.key);
  }
  if (number) number.style.backgroundColor = "#fff";
};

const handleKeyDown = (e) => {
  // 处理所有按键按下高亮反馈
  let targetEl = null;
  if (e.key === "Enter") {
    targetEl = Array.from(document.querySelectorAll('#pin-pad div')).find(el => el.innerText.trim() === 'Enter');
  } else if (e.key === "Backspace") {
    targetEl = Array.from(document.querySelectorAll('#pin-pad div')).find(el => el.innerText.trim() === 'Clear');
  } else {
    targetEl = document.querySelector(`[data-number="${e.key}"]`);
  }
  
  if (!targetEl) return;
  targetEl.style.backgroundColor = "#eee";
};

document.addEventListener("keyup", handleKeyUp);
document.addEventListener("keydown", handleKeyDown);

• 代码额外支持了物理退格键触发Clear清空逻辑，不需要可以直接删除对应判断分支
• 所有按键逻辑统一走handleKeyPress函数，后续修改规则只需要改一处，不会出现鼠标、键盘行为不一致的问题
• 按物理Enter/退格键时，页面对应的虚拟按钮会同步显示按压高亮效果，交互反馈和鼠标点击保持一致

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