web实现简易扫码枪监听

头都大了，客户现场是IE浏览器，新开发的嵌入式页面必须兼容IE，保险起见团队最后的技术选型是Jquery + Bootstrap + 纯原生。
一套写下来，发现脱离了双向绑定、响应式数据写代码不但效率低，写起来还累。

言归正传，扫码枪本质就是对条形码扫码之后，输出扫码的文本。web端监听扫码枪就必须要有一个输入框，就能接收扫码的文本。

代码示例

<div class="page feeding-page">
  <input autocomplete="off" id="scanValue" class="scan-input">   
   <button id="clear">清空</button>
</div>

.scan-input {
  width: 200px;
  text-align: right;
  padding-right: 8px;
  margin: 200px 0 0 300px;
}

<script>
  var debounceTimer; // 监听扫码枪定时器

  // 清空输入框
  $('#clear').on('click', function() {
    $('#scanValue').val("");
  })
 
  // 监听扫码
  $('#scanValue').on('input', function() {
    var self = this;
    // 清除之前的定时器（如果存在）
    clearTimeout(debounceTimer);
    
    // 设置新的定时器（例如 500ms 后执行）
    debounceTimer = setTimeout(function() {
      if (!$(self).val()) {
        return;
      }
      DoBarcodeScan($(self).val())
    }, 500); // 500ms = 0.5秒后触发
  });

  function DoBarcodeScan(text) {
    alert("扫码的结果是:" + text)
  }

</script>

注意事项：扫码枪使用的时候，首先需要聚焦input框，其次扫码枪的值是依次填入input框的，我这里简单做个定时器就行，防止多次触发。输入法一定要切成英文，因为有些符号中英文是不一样的。

哦对了，我最近开发了一个叫牛马工作器的chrome拓展插件，很好玩哦，感兴趣的话，给我的公众号回复牛马即可免费获取。

我的微信公众号： 梨的前端小屋