JS의 코드 스캐너에서 입력 데이터를 얻는 방법-JS 튜토리얼-php.cn

JS의 코드 스캐너에서 입력 데이터를 얻는 방법

Guanhui

풀어 주다： 2020-06-20 17:55:47

앞으로

4870명이 탐색했습니다.

JS의 코드 스캐너에서 입력 데이터를 얻는 방법

1. 코드 스캐너는 키보드 입력 장치와 동일합니다. 일련의 숫자를 입력한 후 enter 키를 추가하세요. 그러나 실제 개발에서는 스캐너 입력과 키보드 사용자 입력을 구분할 필요가 있는데, 차이점은 스캐너 입력이 매우 빠르다는 것입니다.

 let code = &#39;&#39;;
   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: USB 스캐너 데이터를 얻기 위해 js 코드를 살펴보겠습니다

Foreword

관련 튜토리얼을 많이 찾았는데 사용법이 쉽지 않아서 요약했습니다. 각각의 장점을 활용하여 단순화했습니다.

스캐너 건으로 스캔한 바코드의 모든 숫자는 onkeydown 이벤트를 트리거합니다.

여기서 사용하는 것은 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;
    }
  }
}

로그인 후 복사

Summary

입니다. JS가 코드 스캐너에서 입력 데이터를 얻는 방법에 대한 기사는 여기까지입니다. 더 많은 관련 JS를 보려면 Script House의 이전 기사를 검색하여 코드 스캐너의 입력 데이터를 얻거나 아래에서 관련 기사를 계속 찾아보시기 바랍니다. 앞으로 Script House를 더 많이 지원하겠습니다!