扫码枪踩坑指南

异地登入

4个月前发布

0160

文章目录

前言
一、控制台输入法研究

1、英文输入法下，在控制台识别字母+中文+数字
2、中文输入法下，在控制台识别字母+中文+数字
3、结语

二、隐藏的密码输入框使用测试

1、英文输入法下，测试Demo页面识别字母大小写+数字
2、中文输入法下，测试Demo页面识别字母大小写+数字
3、结语

总结

前言

提示：这里可以添加本文要记录的大概内容：

仓储、收银、快递等方面扫码枪都应用的非常广泛，所以也来尝试接入一下扫码枪，这篇文章是接入成功后的踩坑指南

一、控制台输入法研究

1、英文输入法下，在控制台识别字母+中文+数字

图片[1] - 扫码枪踩坑指南 - 宋马
结果：扫码枪完美识别。

2、中文输入法下，在控制台识别字母+中文+数字

图片[2] - 扫码枪踩坑指南 - 宋马
结果：字母识别异常。

3、结语

综合1和2，最省心的办法就是二维码内容只有字符和数字，那就万无一失，或者每次扫码前确认输入法是英文(扫码枪设置使用虚拟键盘，不然识别到汉字后电脑输入法可能会自动变为中文输入法)。这样在保证需要扫码枪的页面没有输入框，就可以写一个看不见的输入框，在扫码时自动获取焦点，之后直接取输入框的值就行，当然扫码结束后要清空隐藏输入框内容。

当然实际情况可能需要识别一些字母，而且页面也会有别的输入框，比如数量调整什么的。在不需要扫码汉字的需求下，为解决中文输入法的问题，使用隐藏的密码输入框，以防止识别字母输入汉字。

二、隐藏的密码输入框使用测试

1、英文输入法下，测试Demo页面识别字母大小写+数字

图片[3] - 扫码枪踩坑指南 - 宋马
结果：可以正确区分大小写，识别出扫码内容为%HelloKitty123

2、中文输入法下，测试Demo页面识别字母大小写+数字

图片[4] - 扫码枪踩坑指南 - 宋马
结果：字母的键盘事件key都被识别为Process，所以识别结果取的键盘事件返回的code的最后一位，最终大小写都被识别为大写

3、结语

综合上面的测试结果，测试Demo中扫码枪识别的二维码内容不能有汉字，字母应该统一大小写，才能保证扫码枪识别结果的准确性。
Demo代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扫码枪接入</title>
</head>

<body>
    <input class="other oo" >
    <script>
        /**
         * 扫描枪工具类
         */
        var ScanCodeUtil = {
            
            keys: [],
            code: null,
            isEnd: true,
            verify: function (key) {
            
                if (key.keyCode == 13 || key.code == 'Enter') {
            //Enter
                    return false;
                }
                if (key.keyCode == 16) {
            //Shift
                    return false;
                }
                return true;
            },
            convert: function (key) {
            
                if (key.keyCode == 229) {
             //Process (中午输入法导致)
                    return key.code[key.code.length-1];
                } else {
            
                    return key.key;
                }
            },
            execute: function (key, callback) {
            
                var keys = this.keys;
                if(key.key == '%') {
            
                    document.getElementsByClassName('scan-code')[0].focus();
                    this.isEnd = false;
                    key.preventDefault();
                }
                if(!this.isEnd) {
            
                    this.keys.push(key);
                    key.preventDefault();
                }
                var code = "";
                if (key.keyCode == 13 || key.code == 'Enter') {
            //扫描枪结束时的自动回车
                    this.isEnd = true;
                    console.log(keys);
                    for (var i = keys.length - 1; i >= 0; i--) {
            
                        if (this.verify(keys[i])) {
            
                            // 原生js
                            code = this.convert(keys[i]) + code;
                        }
                    }
                    this.code = code;
                    this.keys = [];
                    if (code) {
            
                        callback(code);
                    }
                }
            },
            listen: function (callback) {
            
                // 原生js
                var scanCodeInput = document.createElement('input');
                scanCodeInput.type = 'password';
                scanCodeInput.className = "scan-code";
                scanCodeInput.style.width = '0';
                scanCodeInput.style.height = '0';
                scanCodeInput.style.padding = '0';
                scanCodeInput.style.border = '0';
                var body = document.querySelector('body');
                body.appendChild(scanCodeInput);
                scanCodeInput.focus();
                // body.removeChild(scanCodeInput);
                body.addEventListener('keydown', function (event) {
            
                    ScanCodeUtil.execute(event, callback);
                })		
            }
        };	
        ScanCodeUtil.listen(function (code) {
            
            //code为扫描枪扫到的二维码/条形码内容
            //写你的业务代码
            console.log("code:" + code);
        });

        // 中文输入扫码枪识别字母有问题，全大写
    </script>
</body>

</html>