使用javascript（VueJS）读取条形码

Question

我有条码枪式扫描仪，当然，条码可以读入输入字段。目前，我能够读取条形码，但条形码会分别返回每个数字。我需要它作为一个整体。我为此一直在骨折。

例如，我读了一瓶水的条形码，输入字段正确地捕获了该数字（即688267022760）。当我进行控制台日志记录时，我得到每个数字的独立实例。

我的模板（VueJS）在输入时触发扫描程序事件。我不确定这是否正确。我也尝试了keydown和keyup。不确定是否推荐使用扫描枪的事件侦听器。无论如何，这就是我的模板中的内容：

<input id="packageInput" type="text" @input="onBarcodeScanned" />

在我的脚本中：

onBarcodeScanned(barcode) {
  let numbers = barcode.data; //data is the object property I need
  console.log(numbers); //this shows me values I need
  let newarr = []; //creating an emprty array where I assume I need to push data to

  // looping through the data and pushing it to the new array, which does not do what I want but it was my logic
  for (var i = 0; i < numbers; i++) {
    newarr.push(numbers);
  }
},

期望的效果是将那些独立的值放在数组中，然后作为字符串连接。

P.S。

读取条形码属性将返回一系列对象，这些对象具有许多用于多个功能的处理程序。感兴趣的属性是data。参见下面的条形码对象示例

我该怎么做？我很困惑

P.P.S我了解扫描仪本身附带了一系列对其进行编程的说明。其中一些我不太了解。也许有一种条形码以字符串形式返回，而不是以对象的每个数字形式返回？我使用的扫描仪是Wasp CCDScanner WCS3900

Answer 1

onInput每次值更改时运行。大多数条形码扫描仪都会模拟按键来输入其扫描的值，因此就您的应用而言，每个数字都是更改值的按键，因此会将每个按键报告为输入事件。输入事件的data属性只是输入中已更改的部分-因此您一次可以获取一个。

您需要一种方法来确定何时完成输入，而不是确定何时发生。我相信大多数条形码扫描仪将在完全扫描完成后模拟按ENTER或TAB键，因此这可能是您要检测的内容，而不是输入事件，而是按键或键盘事件。