扫码枪踩坑指南

LGEC

已于 2024-03-29 11:12:10 修改

阅读量1.6k

点赞数 3

分类专栏：疑难杂症文章标签： javascript 前端

于 2024-03-29 11:09:49 首次发布

本文链接：https://blog.csdn.net/LGEC_/article/details/137136272

版权

本文是关于扫码枪在前端应用中的踩坑指南，主要涉及控制台输入法研究和隐藏密码输入框的使用测试。在英文输入法下，扫码枪能准确识别字母和数字，但中文输入法下可能出现问题。建议使用英文输入法或隐藏的密码输入框，以确保扫码准确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

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

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

一、控制台输入法研究

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

在这里插入图片描述
结果：扫码枪完美识别。

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

在这里插入图片描述
结果：字母识别异常。

3、结语

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

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

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

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

在这里插入图片描述
结果：可以正确区分大小写，识别出扫码内容为%HelloKitty123

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

在这里插入图片描述
结果：字母的键盘事件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,