网页接收扫码枪扫码输入事件

2019年01月01日 其他资源 6条评论 阅读6928次

电脑外接扫码枪来扫描条形码或二维码并在网页中接收扫到的码串进行下一步处理,是很常见的一个需求。
一些扫码枪的硬件厂商会提供js的库用来获取扫码,但有些厂商什么都不提供,只是给个输入事件,只要电脑开启一个可编辑写入的区域,扫码后会自动填充到该区域。

不论厂商是否提供sdk,往可编辑区域中写入码是不变的,因此可以基于这个特点,在网页中监听keypress事件,做一个通用的js来匹配任何硬件厂商。

大体思路就是,网页加载后,开始监听keypress事件,记录到两次按键时间间隔小于30毫秒(用户手动输入会大于30毫秒,小于30毫秒说明是扫码枪的输入事件),记录按下的键并保存,一直到遇到回车键为止,认为本次扫码结束。

下面是代码。

window.onload = function(e) {
    var code = '';
    var lastTime = 0;
    // 清空临时变量
    function clearCode() {
        code = '';
        lastTime = 0;
    }
    window.addEventListener('keypress', function(e) {
        var currCode = e.which;
        var currTime = new Date().getTime();
        if (lastTime > 0) {
            if (currTime - lastTime <= 300) {
                code += String.fromCharCode(currCode);
            } else if (currTime - lastTime > 1000) {
                // 超时清空
                clearCode();
            }
        }
        // 第一次按键
        else {
            code = String.fromCharCode(currCode);
        }
        lastTime = currTime;
        // 遇到回车
        if (currCode == 13) {
            alert(code); // 这里得到码,做下一步业务处理
            // 回车输入后清空
            clearCode();
        }
    });
}




分享本文至:

WRITTEN BY

avatar
本文标签:sacn扫码枪
看了本文是不是觉得很赞,那就赶紧点击下面按钮分享给身边的朋友吧!

6 条评论

  1. avatar fuck

    会不会有键盘输入混入 扫码输入里的情况呢?

  2. avatar kuytrew

    7月5日晚间消息,瑞幸咖啡于下午召开股东特别大会。据悉,目前该会议已结束。会议投票通过了对陆正耀、黎辉、刘二海及Sean Shao的董事罢免议案。同时会议投票通过了增加Ying Zeng和Jie Yang两名独立董事。http://zyainre.mipropia.com/

  3. avatar 新闻头条

    文章还不错支持一下

  4. avatar qian

    买快递单号,上单号购买网 www.danhw.com

  5. avatar 高中作文

    感谢分享

  6. avatar 宁波PDM

    懂代码的人还是比较牛的

欢迎留言




用户登录

sitemap