设计思路:
扫码枪本质上来讲是一种输入设备,和键盘没有任何区别,因此如何实现对扫码枪的判断是一个难点。
另外一个难点在于如何在不使用文本框监听的情况下实现对扫码枪的监听与输入。
关于以上两点,首先,可以通过判断输入时间间隔来判断究竟是扫码枪还是键盘,经过我的实测,扫码枪输入的时间间隔一般在8毫秒,偶尔会有16毫秒,而键盘输入一般都在80毫秒以上,因此我设定当输入间隔小于等于30毫秒时,判断为扫码枪输入;其次,可以通过对document的onKeyPress事件进行监听判断输入,至于为何要使用onKeyPress事件而不是onKeyDown或者onKeyUp进行监听,是因为只有通过onKeyPress事件监听按键才能准确的还原键盘码,这一点我在chrome已经实测过了。
<% String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <head> <script type="text/javascript" src="<%=basePath%>/jquery-3.2.1.min.js"></script> <script type="text/javascript"> window.onload = function(e) { var codeString = ""; var lastTime; document.onKeyPress = function(e) { var code = e.which; var nextTime = new Date().getTime(); if(nextTime - lastTime <= 30) { codeString += String.fromCharCode(code); } lastTime = nextTime; }; $(this).keypress(function(e) { if(e.which == 13) { alert(codeString);//do something codeString = "";//回车输入后清空
}); } </script> </head>}
以上是我的第一种思路,这个思路有一个缺点,就是会丢失扫码枪扫描的第一个字符,因此我对第一种思路进行了改进:
<% String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <head> <script type="text/javascript" src="<%=basePath%>/jquery-3.2.1.min.js"></script> <script type="text/javascript"> window.onload = function(e) { var code = ""; var lastTime,nextTime; var lastCode,nextCode; document.onKeyPress = function(e) { nextCode = e.which; nextTime = new Date().getTime(); if(lastCode == null && lastTime == null) { } if(lastCode != null && lastTime != null && nextTime - lastTime <= 30) { code += String.fromCharCode(code); } else if(lastCode != null && lastTime != null && nextTime - lastTime > 1000) { code = "";//超时清空 } lastCode = nextCode; lastTime = nextTime; }; $(this).keypress(function(e) { if(e.which == 13) { alert(code); code = "";//回车输入后清空 } }); } </script> </head>