Heim  >  Artikel  >  Web-Frontend  >  So erhalten Sie Eingabedaten vom Codescanner in JS

So erhalten Sie Eingabedaten vom Codescanner in JS

Guanhui
Guanhuinach vorne
2020-06-20 17:55:474864Durchsuche

So erhalten Sie Eingabedaten vom Codescanner in JS

1. Der Codescanner entspricht dem Tastatureingabegerät. Fügen Sie nach der Eingabe einer Zahlenreihe eine Eingabetaste hinzu. In der tatsächlichen Entwicklung muss jedoch zwischen Scannereingaben und Tastaturbenutzereingaben unterschieden werden. Der Unterschied besteht darin, dass die Scannereingabe sehr schnell ist.


 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: Werfen wir einen Blick auf den js-Code, um USB-Scannerdaten zu erhalten

Vorwort

Ich habe viele verwandte Tutorials gefunden, die nicht einfach zu verwenden waren, also habe ich sie zusammengefasst und vereinfacht, indem ich auf die Stärken jedes einzelnen zurückgegriffen habe

Prinzip

  1. Jede vom Scanner gescannte Ziffer des Barcodes löst ein OnKeyDown-Ereignis aus.
  2. Zum Beispiel löst das Scannen des Barcodes „1234567890“ zehnmal hintereinander ein OnKeyDown-Ereignis aus Zeile
  3. Der bis zum letzten Bit gescannte Barcode löst direkt die Eingabetaste aus

Ich verwende vue


window.onload = (e)=> {
  document.onkeydown = (e)=> {
  	let nextCode,nextTime = &#39;&#39;;
  	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;
    }
  }
}

Zusammenfassung

Das ist alles für diesen Artikel über js, der Eingabedaten vom Codescanner erhält. Weitere Inhalte zum js, der Eingabedaten vom Codescanner erhält, finden Sie hier Lesen Sie die vorherigen Artikel von Script Home oder stöbern Sie weiter unten in den entsprechenden Artikeln. Ich hoffe, Sie werden Script House in Zukunft stärker unterstützen!

Empfohlenes Tutorial: „JS Tutorial


Das obige ist der detaillierte Inhalt vonSo erhalten Sie Eingabedaten vom Codescanner in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:jb51.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen