js获取外接扫码设备数据_js 无焦点获取扫码枪数据

js获取外接扫码设备数据

相当于键盘输入设备，输入一连串数字后加一个enter键

html部分

        <div style="display: none">
        <!-- 隐藏的输入框 -->
          <input
            type="text"
            id="scanInput"
            name="scanInput"
            placeholder="扫码枪数据"
            style="width: 100%; height: 100%"
          />
        </div>
1
2
3
4
5
6
7
8
9
10

js部分

 autoFocus() {
  console.log("获取焦点");
  let that = this;
  //设置隐藏的输入框获取默认焦点
  let pFocus = document.getElementById("scanInput");
  pFocus.focus();
   let data = "";
let lastTime, nextTime;
  let code
  document.onkeydown = function (e) {
  //这里没有用onkeypress，是因为onkeypress监听不到enter键，onkeydown 事件适用于所有键，但我这里的逻辑简单，onkeypress和onkeydown都可以，但如果判断的逻辑是那种加上lastCode，nextCode，根据下一个键入事件把上一次的写入data中就不能使用onkeypress，监听不到enter键，就会导致尾字丢失
    // console.log(e)
    code=e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
    nextTime = new Date().getTime();
    if(nextTime && lastTime && nextTime-lastTime>100){//除开第一次，后续键入事件防止首字丢失，延迟输入，删除之前的数据重新计算
      data=e.key
    }else if(code!=13){
      data+=e.key
    }
    lastTime = nextTime;
  };

  this.getScanData = function () {
    document.onkeyup = function (e) {
      // console.log(e)
      let keyCode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
      if (keyCode == 13 && data != "") {
        console.log("扫码枪数据：" + data);
          //下方使用你要调用的方法

		data=""//清空data值
      }
    };
  };
  this.getScanData();
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36