使用按键和或功能

Question

当按下键盘上的“ Enter”按钮时，我要将我的应用程序配置为单击“ Enter” Div。我已经有Enter Div，当我使用鼠标单击它时，它可以正常工作。我相信我需要将按键功能与事件侦听器和逻辑或| |操作员。但是我无法正常工作，甚至不确定我是否朝着正确的方向发展，感谢您的帮助。我的代码如下。

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);

<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>

Answer 1

在您的handlekekep事件处理程序中使用event.keycode，以确定按下哪个键，如果按下 enter 键，然后在按下同一指令时发送相同的指令单词 enter 单击：

document.getElementById("pin-pad").addEventListener("click", (event) => {
  if (event.target.innerText === "Enter") {
    //window.electronAPI.sendPin(pin);
    console.log('click Enter')
    return;
  }
})

const handlekeyUp = function (e) {
  e.stopPropagation();

  if ( 13 === e.keyCode ) { // Enter key
    //window.electronAPI.sendPin(pin);
    console.log('keypress Enter')
  }
}

document.addEventListener("keyup", handlekeyUp);

<div id="pin-pad">
  <div>Enter</div>
</div>

---

重构代码，然后单击单词“ Enter” Word，KeyPress输入密钥：

const handleKey = (event) => {
  const key = event.key || event.target.innerText;
  if (!/^([0-9]|Enter|Clear|Escape)$/.test(key)) { return; }
  handleKeyOut(event);

  const display = document.getElementById("display");

  if (key === "Enter") {
    console.log("sendPin", display.value);
    //window.electronAPI.sendPin(display.value);
    return;
  }

  if (key === "Clear" || key === "Escape") {
    pin = display.value = "";
    return;
  }

  display.value += key;
}

const handleKeyOver = (event) => {
  const key = event.key || event.target.innerText;
  const number = document.querySelector(`[data-key="${key}"]`);
  if (!number) { return; }
  number.style.backgroundColor = "#eee";
};

const handleKeyOut = (event) => {
  const key = event.key || event.target.innerText;
  const number = document.querySelector(`[data-key="${key}"]`);
  if (!number) { return; }
  number.style.backgroundColor = "#fff";
};

document.getElementById("pin-pad").addEventListener("click", handleKey);
document.addEventListener("keyup", handleKey);
document.addEventListener("keydown", handleKeyOver);
document.querySelectorAll("[data-key]").forEach((divkey) => {
  divkey.addEventListener("mouseover", handleKeyOver);
  divkey.addEventListener("mouseout", handleKeyOut);
})

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

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