javascript - 如何修复 "My first scan value is not same as my second scan value and the value scan in HTML is not same as value scan in notepad?"

Question

我正在使用扫描仪检测设备。目前，我的条形码的值为 2345345 A1。因此，当我扫描到记事本或文本编辑器时，输出将类似于 2345345 A1，这是正确的条形码值。

问题是:

• 当我第一次将条形码扫描到 HTML 页面时，输出值将类似于 2345345A1 。这表明空格键已经丢失。如何让空格变成HTML中的一个字符？这样扫描出来的值就和条码的精确值一样。

• 接下来，当我第二次将条形码扫描到 HTML 页面时，输出值将类似于 2345345 。这表明条形码的第二个字丢失了。那么，如何使我的第二次扫描值与第一次扫描值相同呢？

这是第一次扫描的图片:

这是第二次扫描的图片:

这是我扫描到文本编辑器时的图片:

这是我的代码:

$(document).scannerDetection({
  timeBeforeScanTest: 200, // wait for the next character for upto 200ms
  startChar: [120], // Prefix character for the cabled scanner (OPL6845R)
  endChar: [13], // be sure the scan is complete if key 13 (enter) is detected
  avgTimeByChar: 40, // it's not a barcode if a character takes longer than 40ms
  preventDefault: true,
  ignoreIfFocusOn: '.scannerOff',
  onKeyDetect: function(event) {
    console.log(event.which);
    return false;
  }
  onComplete: function(numberBarcode) {
    validScan = true;

    alert("Job Start");
    $('#fullbarcode').text(numberBarcode);
    $('#barcode').text(numberBarcode);
    var res = numberBarcode.substring(0, 7);
    document.getElementById("barcode").innerHTML = res;
    $('#zone').text(numberBarcode);
    var subStr = numberBarcode.slice(-3);;
    document.getElementById("zone").innerHTML = subStr;

  }, // main callback function	,    
  onError: function(string) {
    $('#userInput').val($('#userInput').val() + string);
  }
});

table {
  border-collapse: collapse;
  width: 40%;
}

th,
td {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #f2f2f2
}

th {
  background-color: #4CAF50;
  color: white;
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="/home/mimos/Videos/jQuery/jquery.scannerdetection.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://rawgit.com/kabachello/jQuery-Scanner-Detection/master/jquery.scannerdetection.js"></script>
<p><strong> Scan BarCode : </strong></p>
<input id="userInput" type="text" resetObject.autofocus="false" readonly/><br/><br/><br/>

<table>
  <tr>
    <th>Full Barcode</th>
    <th>Barcode</th>
    <th>Zone</th>
  </tr>
  <tr>
    <td>
      <p id=fullbarcode type="text" readonly/><br/><br/><br/>
    </td>
    <td>
      <p id=barcode type="text" readonly/><br/><br/><br/>
    </td>
    <td>
      <p id="zone" type="text" readonly/><br/><br/><br/>
    </td>
  </tr>
</table>

Answer 1

var res = numberBarcode.substring(0, 7);
document.getElementById("barcode").innerHTML = res;
$('#zone').text(numberBarcode);
var subStr = numberBarcode.slice(-3);;
document.getElementById("zone").innerHTML = subStr;

你先拆分一下，然后问为什么少了字符？document.getElementById("zone").innerHTML = numberBarcode; 怎么样？