条码扫描器输入上的 DOM 重新加载

Question

我有一个适用于条形码扫描仪的应用程序。条形码扫描仪以外部键盘的方式与计算机通信，因此我在 DOM 上放置了一个 keydown 事件侦听器，以捕获来自条形码扫描仪的输入并在 dom 中标记相应的项目。现在我的问题是，每当读入条形码时，dom 似乎都会刷新并清除所有选择。有人可以帮忙吗？这是我的代码。顺便说一下，所有这些都是在电子中完成的

document.addEventListener("keydown", (e) => {
  if (e.key === "" || e.key === "Control") {
    return
  }

  buffer.push(e.key);

  setTimeout(() => {

    if (buffer.length > 0) {
      buffer.forEach((char) => {
        string = string + char
      })

      if (buffer.length >= 12) {

        const tableRows = document.querySelector("tbody").querySelectorAll("tr");
        tableRows.forEach((row) => {

          const barcode = row.querySelector(".td_Barcode--hidden").innerText;

          if (barcode === string) {
            toggleRowCB(row)
          }

        })
      } else {
        console.log(buffer.length);
      }
    }

    buffer = [];
    string = "";

  }, 500)

})

Answer 1

代码看起来不错，但你可以尝试添加

e.preventDefault();

用于提交。我认为当您使用条形码扫描仪扫描条形码时，它会模仿阅读 +“Enter”，从而绕过您的 e.key 条件。

电子键盘事件处理的包建议；

• Electron-localshortcut