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

问题描述

我有一个可与条码扫描仪配合使用的应用程序。条码扫描器以外部键盘的方式与计算机通信,因此我在 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)

})

解决方法

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

e.preventDefault();

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

电子键盘事件处理的封装建议;