JQuery获取扫描枪扫描的数据

本文介绍如何使用JavaScript监听扫描枪输入,将其等效于键盘输入,解析ASCII码并处理回车事件,适用于各种输入框,包括全局监听和特定输入框绑定。
该文章已生成可运行项目,

1)、首先我们得知道扫描枪的性质跟键盘是一样的,都是输入设备(可以等价理解为扫描枪就是键盘)。然后每次扫描完都会自动输入一个回车按钮。例如我们扫描一个条形码(中国商品的条形码上的数值都是13位的),相当于是我们在键盘上按了13下键盘按键。

2)、得知我们扫描枪的性质就是一个键盘,那我们就可以通过键盘的监听事件来监听扫描仪键入的按钮是哪一些(注意,监听到的数据是一个ASCII码,需要转换下)。

3)、上代码:(下面的代码监听的是全局的输入情况,不管你有没有获得输入框的焦点都可以监听的到,当然你也可以对一个输入框绑定该监听事件,稍微修改下代码即可)

<script>
    var char = "";    //记录扫描枪输入的内容
    var lastTime=null;//上次输入的时间
    var nextTime=null;//这次输入的时间
    var lastCode=null;//上次输入的键值(接收到的为ASCII值)
    var nextCode=null;//这次输入的键值(接收到的为ASCII值)
    $(document).keydown(function(event){
            nextTime = new Date().getTime();//获取当前键入的时间
            //判断是否输入了回车按钮,并确认是扫描枪键入的值
            if (event.keyCode === 13 && char !== "" && nextTime - lastTime <= 30){
                //把监听到的数据显示在我的文本框上
                $("input[name='good_id']").val(char);
                //清空数值,以便下一次扫描
                char = "";
                lastCode = null;
                lastTime = null;
            }else {
                //获取键入的键值
                nextCode = event.keyCode;
                //如果是第一个字母你可以进行一些代码增强,我这里并没有处理,直接转换了
                if(lastCode == null && lastTime == null){
                    //初始字母
                    char = String.fromCharCode(nextCode);
                    //写入你要增强的代码。。。
                    
                    //判断是否是扫描枪键入的值
                }else if(lastCode != null&&lastTime!= null && nextTime - lastTime <= 30){
                    //键入的值为ASCII码,要获取对应得值,需要转换一下
                    char += String.fromCharCode(nextCode);//存到char中,拼接上次的结果
                } else{
                    //判断为手动输入,不做任何处理,数据保持为null即可
                    // alert("suck");
                    char = "";
                    lastTime=null;
                    nextTime=null;
                    lastCode=null;
                    nextCode=null;
                }
                //lastCode、lastTime为中间变量,存储数据,让nextCode与nextTime可以存新数据
                //nextCode与nextTime要存储新键入按钮的信息
                lastCode = nextCode;
                lastTime = nextTime;
            }
</script>

总之大体上就这个样子了,参考了这位老哥的文章https://www.jianshu.com/p/3019858e3cad

而且有一个问题我自己也不知道怎么解决,(我用的是AdminLTE的前端框架)那就是在input文本框获得焦点时扫描得到的是一堆乱码(估计跟我框架有关系),意思就是我在input文本框中键入一个字母a,跟没有获得焦点在全局的情况下键入一个字母a,它们通过代码监听到的ASCII码值是不一样的,这个问题我没解决,我也不知道怎么解决。我直接禁用input输入框了采用js代码为input框赋值,然后再加一个开关用于·开启 “手动输入”

本文章已经生成可运行项目
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值