最近在做物资管理相关的功能,不可避免的就遇到了扫描枪扫码和打印机打印标签的场景。打印机的那部分完成的比较容易,使用了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:其实解决问题的方法就是一层一层的刨开问题,有的时候问题被切分以后,有一部分答案就已经显而易见了。