最近在做物资管理相关的功能,不可避免的就遇到了扫描枪扫码和打印机打印标签的场景。打印机的那部分完成的比较容易,使用了CLodop这个打印机控件,设计好直接打印就行。但是在扫描枪的部分却遇到了阻碍。起初以为这个事情相对比较简单,找到扫描枪的开发文档,直接调用接口,监听扫描事件,直接就完成了。等到真正开始编写才发现扫描枪没有开发文档.....
于是开始寻找解决方案,看到扫码枪的行为是一个持续输入。直接在前端准备一个文本区域进行录入是简单快捷的实现方式。但是对用户来说不太友好,毕竟二维码里有一些是用不到的信息。所以这里就存在了两个痛点:
1、如何不使用文本框进行扫码枪时间的监听和输入
2、如何区分扫码枪输入还是键盘输入
下面先上代码:
jQuery(document).ready(function(){
var codeString = "";
//定时器每隔200ms 清空codeString
var scanTimeer = setInterval(function() {
var now = new Date().getTime();
if (now - lastTime > 200) {
codeString = "";
}
},
200);
var lastTime;
var caseFormat = false;
document.onkeydown = function(e) {
var nextTime = new Date().getTime();
var code = e.which;
// console.log(e)
//shift
if (code == 16) {
caseFormat = true;
} else {
if (caseFormat) {
if (code >= 65 && code <= 90) {
//转小写
code = code + 32;
} else if (code >= 97 && code <= 122) {
//转大写
code = code - 32;
}
caseFormat = false;
}
var char = String.fromCharCode(code);
if (codeString == "") {
codeString += char;
} else if (nextTime - lastTime <= 30) {
codeString += char;
}
}
console.log(codeString);
lastTime = nextTime;
};
$(this).keydown(function(e) {
if (e.which == 13) {
onScanInput(codeString.substring(0, codeString.length - 1)); //do something
codeString = ""; //回车输入后清空
}
})
})
//扫描抢输入事件,监听到扫描枪输入后会调用
function onScanInput(str) {
//此处可以加入想要做的处理
}
解决方案其实上面两点已经给出,就是先把扫码枪想象成键盘事件document.onkeydown这样就去掉了文本框的限制。第二点的解决方案就是扫码枪的输入会比人快很多,那么就利用一个输入阈值来进行区分,这种方案可能还有待改善,毕竟万一按键盘的速度比较快就会有错误识别。不过这也是小概率事件了。最后还有一个大的问题没能解决,就是如果二维码里有中文,没有办法进行识别,如果大家有什么好的办法可以一起交流一下。
tips:其实解决问题的方法就是一层一层的刨开问题,有的时候问题被切分以后,有一部分答案就已经显而易见了。