Let's take a look at how js obtains input data from a code scanner

1. The code scanner is equivalent to a keyboard input device. After inputting a series of numbers, add an enter key. However, in actual development, it is necessary to distinguish between scanner input and keyboard user input. The difference is that the scanner input is very fast.

 let code = '';
   let lastTime, nextTime;
   let lastCode, nextCode;
   window.document.onkeypress = (e) => {
    if (window.event) { // IE
     nextCode = e.keyCode;
    } else if (e.which) { // Netscape/Firefox/Opera
     nextCode = e.which;
    }
    if (nextCode === 13) {
     if (code.length < 3) return; // 手动输入的时间不会让code的长度大于2，所以这里只会对扫码枪有

     console.log(code); // 获取到扫码枪输入的内容，做别的操作

     code = &#39;&#39;;
     lastCode = &#39;&#39;;
     lastTime = &#39;&#39;;
     return;
    }
    nextTime = new Date().getTime();
    if (!lastTime && !lastCode) {
     code += e.key;
    }

    if (lastCode && lastTime && nextTime - lastTime > 30) { // 当扫码前有keypress事件时,防止首字缺失
     code = e.key;
    } else if (lastCode && lastTime) {
     code += e.key;
    }
    lastCode = nextCode;
    lastTime = nextTime;
   }

PS: Let’s take a look at the js code to get USB scanner data

Preface

I found a lot of related tutorials that were not very easy to use, so I summarized and simplified them by drawing on the strengths of each.

Principle

1. Scanned by the QR code gun Each digit of the barcode will trigger an onkeydown event
2. For example, scanning the barcode with the barcode position '1234567890' will execute the onkeydown event 10 times in a row
3. When the barcode is scanned to the last digit, Enter will be triggered directly

You need to introduce jQuery, I am using vue

window.onload = (e)=> {
  document.onkeydown = (e)=> {
  	let nextCode,nextTime = '';
  	let lastTime = this.lastTime;
  	let code = this.code;
    if (window.event) {// IE
      nextCode = e.keyCode
    } else if (e.which) {// Netscape/Firefox/Opera
      nextCode = e.which
    }
    nextTime = new Date().getTime();
    //字母上方 数字键0-9 对应键码值 48-57; 数字键盘 数字键0-9 对应键码值 96-105
    if((nextCode>=48&&nextCode<=57) || (nextCode>=96&&nextCode<=105)){
    	let codes = {&#39;48&#39;:48,&#39;49&#39;:49,&#39;50&#39;:50,&#39;51&#39;:51,&#39;52&#39;:52,&#39;53&#39;:53,&#39;54&#39;:54,&#39;55&#39;:55,&#39;56&#39;:56,&#39;57&#39;:57,
			 &#39;96&#39;:48,&#39;97&#39;:49,&#39;98&#39;:50,&#39;99&#39;:51,&#39;100&#39;:52,&#39;101&#39;:53,&#39;102&#39;:54,&#39;103&#39;:55,&#39;104&#39;:56,&#39;105&#39;:57
			};
			nextCode = codes[nextCode];
			nextTime = new Date().getTime();
    }
    // 第二次输入延迟两秒，删除之前的数据重新计算
    if(nextTime && lastTime && nextTime-lastTime>2000){
			code = String.fromCharCode(nextCode);
    }else{
    	code += String.fromCharCode(nextCode)
    }
    // 保存数据
    this.nextCode = nextCode;
    this.lastTime = nextTime;
    this.code = code;
  	// 键入Enter
    if(e.which == 13) {
      // 判断 code 长度（这里就获取到条码值了，以下业务自由发挥）
      	code = $.trim(code)
      if (code.length == 13) {
        this.$message(&#39;A类条码:&#39; + code);
      } else if (code.length == 23) {
				this.$message(&#39;B类条码:&#39; + code);
      } else if (code.length == 0) {
				this.$message(&#39;请输入条码&#39;);
      } else{
      	this.$message(&#39;条码不合法：&#39; + code);
      }
      //键入回车务必清空code值
    	this.code = &#39;&#39;
    	return false;
    }
  }
}

Related learning recommendations: javascript video tutorial

The above is the detailed content of Let's take a look at how js obtains input data from a code scanner. For more information, please follow other related articles on the PHP Chinese website!