JS 中实现扫码枪使用 [JavaScript,jQuery,一维扫码]

女爷i 2022-12-09 14:00 1137阅读 0赞

![20200922191651247.gif][]

### 前言： ###

### 首先是条码扫描头在设备管理器中可以看到就是一个键盘设备。   然后屏幕也是个光源，扫描枪不能扫屏幕，条码打印到纸上就行了。 ###

### 然后各家厂商都可以设置扫描结果设置自定义前缀后缀，搜索设备型号找到文档，扫描指定的设置码即可，我这边使用的是Honeywell(霍尼韦尔) MS5145条码阅读器的默认设置， ###

### 即扫描成功后(发出滴声 滴声可关闭) 键盘自动输入：扫描结果（条码）+ 回车。 ###

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDE5NTQyMg_size_16_color_FFFFFF_t_70][] ###

### 代码主要是利用JS中的键盘监听事件，然后设置定时器去校验。 ###

### 然后我的业务需求是13位的纯数字的商品编号条码和16位的数字加字母的MAC地址，在同一页面实现扫码自动输入(输入前校验)。 ###

### 通过keydown获取到HTML DOM Event 对象 ###

### event包含的属性中event.keyCode、event.charCode和event.which都可以获知按下了哪个键盘按键，其中包含了浏览器兼容性问题可参考这篇文章： ###

## [js键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解][js_event.keyCode_event.charCode_event.which] ##

### 其中获取到数值都是对应的键盘ASCII码。 ###

### 在前考虑过数组下标取值最快 还有些查找算法，后来想到这边的业务需求只需输入数字和字母所以选择了在js中使用键值对。 ###

### 使用了下面的键值对： ###

### 使用keyDate\[ascii值\]就可以获得按键 ###

// 键盘ASCII码:"按键"
    var keyData={
        //数组部分有每个按键有两个对应的两个ascii值是因为
        //主键盘区的数组和Num数字辅助键盘区(键盘右侧数字小键盘)同一数字的ascii值不同
    	48:"0",96:"0",
    	49:"1",97:"1",
    	50:"2",98:"2",
    	51:"3",99:"3",
    	52:"4",100:"4",
    	53:"5",101:"5",
    	54:"6",102:"6",
    	55:"7",103:"7",
    	56:"8",104:"8",
    	57:"9",105:"9",
    
        //键盘中大写A和小写a的ascii值是相同的 我的需求中必须大写字母 所以:
    	65:"A",66:"B",67:"C",68:"D",
    	69:"E",70:"F",71:"G",72:"H",
    	73:"I",74:"J",75:"K",76:"L",
    	77:"M",78:"N",79:"O",80:"P",
    	81:"Q",82:"R",83:"S",84:"T",
    	85:"U",86:"V",87:"W",88:"X",
    	89:"Y",90:"Z"};

### 然后我们 ###

### 我们在页面中加入这段代码 ###

### 使用扫描枪扫描（系统操作焦点需要在浏览器 当前页面） ###

### ![20200922172334185.png][] ###

### chrome控制台中打印以下 ###

### 全大写的原因在keyDate\[\]代码注释中有说明 ###

### 我们可以看到他在切换大小写的时候还按了一次left shift按键（需注意） ###

### ![20200922172416947.png][] ###

### 接下来看扫描成功后按键的输入速度： ###

//键盘事件中加入
    console.log(new Date().getTime()/1000);

### 约0.2秒输入完成（可能所使用的电脑的性能有一定关系 所以接下来的监听重置时间设置0.5秒是较为保险的一个时间） ###

### ![20200922172852132.png][] ###

### 下面是出项目中抽离的可分享代码 可直接使用的demo： ###

<!DOCTYPE html>
    <html>
    <head>
    	<title>扫码枪demo</title>
    </head>
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/3.1.0/jquery-3.1.0.min.js"></script>
    <body>
    		mac地址:<input type="text" name="macAddress" id="macAddress" placeholder="16位" /><br>
    		产品编号:<input type="text" name="productNumber" id="productNumber" placeholder="13位" />
    </body>
    <script>
    		var temporaryKeyList="";
    		var timer="";
    
    		$(document).keydown(function (event) {
    			var key=event.keyCode;
    			//依次是屏蔽 回车 左Shift
    			if (key==13||key==16) {
    				return;
    			}
    			//如果有定时器就不创建新的check方法
    			if (!timer) {
    				temporaryKeyList="";
    				timer=setInterval("checkInput()",500);
    			}
    			temporaryKeyList+=keyData[key];
            });
    
            function checkInput(){
            	if (temporaryKeyList.length==13) {
            		$("#productNumber").val(temporaryKeyList);
            	}
            	if (temporaryKeyList.length==16) {
            		$("#macAddress").val(temporaryKeyList);
            	}
            	//清除定时器
            	clearTimeout(timer);
            	timer=null;
            }
    
    		var keyData={
    			  48:"0",96:"0",
    			  49:"1",97:"1",
    			  50:"2",98:"2",
    			  51:"3",99:"3",
    			  52:"4",100:"4",
    			  53:"5",101:"5",
    			  54:"6",102:"6",
    			  55:"7",103:"7",
    			  56:"8",104:"8",
    			  57:"9",105:"9",
    			  65:"A",66:"B",67:"C",68:"D",
    			  69:"E",70:"F",71:"G",72:"H",
    			  73:"I",74:"J",75:"K",76:"L",
    			  77:"M",78:"N",79:"O",80:"P",
    			  81:"Q",82:"R",83:"S",84:"T",
    			  85:"U",86:"V",87:"W",88:"X",
    			  89:"Y",90:"Z"};
    </script>
    </html>

## ##

### 大概就是逻辑就是发生键盘按键之后去监听接下来的0.5秒的键盘事件 ###

### 如果符合13位16位(我的需要)就认为它是扫码枪输入，这种方案可能扫描枪扫描的输入的0.5秒内，刚好碰到键盘，但是不符合我的长度要求。即失败，重新扫描即可，规避了错误输入。 ###

### 但是还是有错误的几率 所以我在checkInput()中加入了我的特殊要求校验（代码未列出），可自行加入校验规则。 ###

## ##

### 如果有更好的方案或者案例可以@我一下 ###

## ##

### 顺颂时祺 ###

[20200922191651247.gif]: /images/20221123/8ca3924e2ba94ae687a82e56b9f6b561.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDE5NTQyMg_size_16_color_FFFFFF_t_70]: /images/20221123/b4dd7239e5604504b0e5f4b0f0910624.png
[js_event.keyCode_event.charCode_event.which]: https://www.kunjuke.com/jiaocheng/55925/
[20200922172334185.png]: /images/20221123/d999023c354e470cb6661c9663ff3ee0.png
[20200922172416947.png]: /images/20221123/9ef9125138d349789e08178367cadfca.png
[20200922172852132.png]: /images/20221123/34ad987eca73424c9ff64057764f241f.png