html页面使用js读取扫码枪的扫码内容

向前丶

已于 2023-06-01 11:33:57 修改

阅读量1.5k

点赞数

分类专栏： HTML5 文章标签： html 前端

于 2023-06-01 11:30:01 首次发布

本文链接：https://blog.csdn.net/qq_26324919/article/details/130984644

版权

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

USB扫码枪相当于键盘输入，假设二维码里面保存的内容是 AbCdeEg,那么USB扫码枪在扫码时就相当于快速的依次按下了AbCdeEg这几个键，所以我们在js里面只要监听键盘时间就可以获取到扫码的内容。

我这里监听的是keypress事件，他可以区分大小写；使用keyedown事件不行，其键值不对

有的扫码枪需要设置为自动在扫码结束后添加一个回车键的功能。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>USB扫码枪监听测试</title>
</head>

<body>
    扫码枪输入: <input id="birthday" name="birthday" style="outline:none; width: 400px; height: 30px; font-size: 30px;" />
</body>
<script>
    var str = ""; //  暂存字符串
    var timeout = 100; //  超时时间，毫秒
    var lastStamp = new Date().getTime(); //  记录按键最后触发时间戳 毫秒

    function keypress(e) {
        var keycode = e.which || e.keyCode; //   兼容不同内核浏览器， e.keyCode IE内核， e.which非IE内核
        var realkey = String.fromCharCode(keycode);
        var now = new Date().getTime();
        var tmdiff = now - lastStamp;
        console.log('按键码:' + keycode + '; 字符:' + realkey + '; 时间差(ms):' + tmdiff);
        if (tmdiff > timeout) {
            //  按键间隙超过timeout，就丢弃之前的按键数据,直接替换
            str = realkey;
            lastStamp = now;
            return;
        }

        //监听Enter键，即回车键
        if (keycode == 13) {
            if (str != "") {
                x = document.getElementById("birthday");
                x.value = str;
                document.getElementById("birthday").select();
                console.log('扫码枪数据:' + str);
                str = "";
            }
        } else {
            str = str + realkey;
        }
        lastStamp = now;
    }

    document.onkeypress = keypress;
</script>

</html>

参考：

html页面扫描枪的使用-顶码先生 (tipcode.cn)

https://www.cnblogs.com/jiangweiyu/p/15895037.html