js 中 实现扫码枪在中文输入法下扫码与实际差异的问题(大小写字母和数字的已没问题特殊字符还不知道咋处理所以没实现特殊字符)

vue 扫码枪 扫码墩 扫码器 中文输入影响 大小写影响 解决方案 js web端扫码枪对接 前端扫码枪 html扫码枪 vue扫码枪 vue3 扫码枪/扫码墩/扫码器 中文输入影响 大小写影响 解决方式。 阅读详情

        在网上找了各种方法针对与扫码枪在中文输入法的情况下键入值异常(与实际不一致的问题)有说用type=password的来模拟text框 用定位来覆盖(这种没啥用,看需要吧,因为搞完后没输入法 如果从中间去手动改这个值 定位不准确等)后来又看到一种比较靠谱的 就是监听按键速度来区分是人工还是扫码枪  这个可以识别到输入类型 但是 获取的值还是有问题(可能我打开方式不对 因为录入和监听是同步进行的 也就是说 至少录入两位才能监听到 这时候再去改输入框 type 其实录入的操作已经同步做完了  所以这种只实现了enter键能触发)

        最后 通过各种的方法 各种尝试(在我有的扫码枪型号下 测试了下我的方法 字母数字组合的可以实现了 其他扫码枪不知道会不会有差异)

        代码如下:通过监听来实现 判断到是扫码枪且是中文输入法 直接获取按键监听 存下来的值 去做后续操作 不是扫码枪和中文输入法 就走之前的逻辑 

    <template>
         <input v-model="inputs" 
            type="text"
            name="inputs" 
            id="inputs" 
            autocomplete="off"
             @keydown="handleKeyUp" />
    </template> 
        //    这是vue代码  在data中用到了 realBarcode(按键监听的存储) inputs(v-model)绑定的值  isScanningGun(是否中文下的扫码枪录入)

        // 处理keyup事件
        handleKeyUp(e) {
                var shiftKey = e.shiftKey//为true则按了shiftKey
                let keyCode=e.code
                var key = e.key //其他按键key
                let array = ["Q", "W", "E", "R", "T", "Y", "U",
                "I", "O", "P", "A", "S", "D", "F", "G", "H", "J",
                "K", "L", "Z", "X", "C", "V", "B", "N", "M",
                "1","2","3","4","5","6","7","8","9","0"]
                // 这种情况下 基本上是 中文输入法 才有出现
                if(key=="Process"){
                        for (const a of array) {
                            // 如果匹配到是英文
                            if(keyCode=="Key"+a){
                            // 判断大小写
                                if(shiftKey){
                                    this.realBarcode+=a
                                    this.isScanningGun=true
                                }else{
                                    this.realBarcode+=(a.toLowerCase())
                                    this.isScanningGun=true
                                }
                            }else 
                            // 如果匹配到是数字
                            if(keyCode=="Digit"+a){
                                this.realBarcode+=String(a)
                                this.isScanningGun=true
                            }
                        }
                        if(keyCode=="Enter"){
                            this.clickBarCode()
                        }
                }else 
                // 这是英文状态下 直接判断输入的英文在没在上面大写字母中
                if(array.includes(key.toUpperCase())){
                    this.realBarcode+=key
                }else 
                // 这是英文状态下 直接判断输入的小写英文在没在上面大写字母中
                if(array.includes(key.toUpperCase())){
                    this.realBarcode+=key
                }else 
                // 这是数字 直接判断输入的数字在没在上面数字中
                if(array.includes(key)){
                    this.realBarcode+=String(key)
                }
                else if(keyCode=="Enter"){
                   // 监听到enter触发了,执行后续事件
                    this.clickBarCode()
                }
        },

VUE扫码枪中文输入法兼容自动回车事件(上) vue框架下面的扫码枪,针对windows+搜狗中文输入法兼容性问题处理方案 阅读详情

相关推荐

扫码枪输入监听避坑指南:从`keydown`事件到`input`事件的正确姿势(附完整代码)

本文详细解析了扫码枪输入监听中的常见问题,特别是`keydown`事件在中文输入法干扰下的局限性,并提出了基于`input`事件的健壮解决方案。通过完整代码示例和优化技巧,帮助开发者实现高效、准确的扫码枪输入处理,适用于零售、仓储等多种商业场景。

weixin_29017445的博客 168

解决qrcode解析二维码中文乱码问题(js中文乱码)

// UCS-2和UTF8都是unicode的一种编码方式 // js代码中使用的是UCS-2编码 1、 // UCS-2和UTF8都是unicode的一种编码方式 // js代码中使用的是UCS-2编码 js的编码方式 2、 这里写图片描述 3、str2utf8: 1)字符转USC-2,用charCodeAt() 2)如英文的话,直接返回字符str.charAt(i);//返回指定位置的字...

Nadou_的博客 1万+

PDF转二维码原理与工程实践:URL托管+编码全流程解析

PDF转二维码并非直接编码文件,而是将PDF托管为可访问URL后生成对应二维码图形——这是理解该技术的基础概念。其核心原理在于突破QR码容量限制(最大仅2953字节),通过HTTP协议建立轻量级跳转通道,实现跨平台、免安装的文档直达。技术价值体现在降低用户行为门槛、适配线下弱交互场景(如展会、车间、公告栏),并支持权限控制、埋点追踪与动态更新。典型应用场景包括教培资料分发、企业知识库接入、活动物料部署及合规文档分发。本文深入剖析URL托管选型、二维码参数调优、打印识别保障与安全红线等关键工程细节。

weixin_33910460的博客 322

Vue--扫码枪,输入法为中文时乱码

扫码枪是模拟键盘的回车按键,所以输入的时候切换成email类型的输入框

这里是迷阵的博客耶 3234

TestKeyBorad虚拟键盘实战:从输入模型到收银场景集成

在Web交互中,系统原生键盘的弹出时机与按键值往往不可控,尤其在Kiosk模式、触摸屏收银和自助终端场景下,原生输入法可能不弹出、焦点漂移或键值不一致,导致业务流程受阻。虚拟键盘通过内部buffer与回调机制,将输入行为转变为可控的白盒模型,相比模拟原生事件更稳定。基于HTML与原生JavaScript实现的TestKeyBorad,提供13项初始化参数与自定义布局,支持金额掩码、扫码枪互斥、长按重复和双布局切换,并有效规避连点丢字与输入法组合态干扰。它适合收银、自助点餐、机房终端等需要深度定制输入体验的场

weixin_27945229的博客 4

VC++通过USB向GT800打印机发送ZPL指令实现条码标签自动打印

在Windows桌面应用开发中,调用打印机驱动输出标签内容,是MES、WMS等系统集成条码打印的常见需求。理解GDI打印管线与RAW数据通道,是掌握底层打印控制的关键。通过OpenPrinter、WritePrinter等Windows打印API,开发者可以直接向USB接口的斑马GT800打印机发送ZPL指令,绕过标签编辑软件实现批量动态标签打印。ZPL作为斑马打印机的原生指令语言,其^XA、^FO、^BC等字段定义了标签的布局与条码参数。实际工程中还需处理中文字库兼容、Unicode字符集转换、打印机枚举

weixin_34341229的博客 323

从摄像头到扫码枪:B/S架构仓储系统扫码方案升级与实战避坑

本文详细分析了B/S架构仓储系统中从摄像头到扫码枪的技术升级过程,重点对比了两种方案的优缺点。扫码枪在成本、操作效率和环境适应性方面显著优于摄像头方案,尤其适合复杂工业环境。文章提供了扫码枪接入的实战指南,包括设备选型、代码实现及常见问题解决方案,帮助开发者高效完成系统升级。

weixin_30843605的博客 409

解决二维码中文乱码js包

通常我们做二维码用qrcode.js的时候会出现中文乱码这个情况,只是因为本身qrcode.js这个包没有编译中文,现在调用utf16to8.js可以解决这个问题啦!经过本人测试时没问题的,如果有问题,可以私信联系我的!

QR码与Data Matrix码全方位对比:编码原理、生成实操与工业选型指南

二维码早已渗透进日常生活与工业生产,但很多人误以为QR码就是二维码的全部。实际上,在汽车零部件、医疗器械、电子产品等工业追溯场景中,Data Matrix码(DM码)才是主流选择。两者虽同属二维条码,却在编码模式、纠错策略、定位结构和空间利用率上有着本质区别:QR码依靠三个定位角、支持多级纠错与更大的数据容量,更适合消费级应用;DM码凭借紧凑的L形定位边、高密度点阵和耐污损特性,在激光打标、小面积赋码等环节表现更稳定。理解这些原理,有助于根据材质、读码距离和扫描环境选择合适的码制,并规避打印参数、静区不足、

weixin_34318326的博客 322

瑞芯微RK3576开发板实战:6TOPS NPU如何加速你的AIoT项目(附性能测试)

本文以瑞芯微RK3576开发板为核心,深入探讨其6TOPS NPU在AIoT项目中的实战应用。通过详细的性能测试对比,展示了NPU如何将AI模型推理速度提升15倍以上,并大幅降低CPU负载。文章涵盖从环境搭建、模型转换优化到多屏异显与系统级调优的全流程,为开发者提供了将硬件算力转化为实际项目加速效果的完整指南。

oauth7security的博客 822

手把手教你用DaVinci Configurator配置AUTOSAR SWC接口(含RTE避坑指南)

本文提供了一份基于DaVinci Configurator工具的AUTOSAR软件组件(SWC)接口配置实战指南。文章详细拆解了SR(发送者-接收者)和CS(客户端-服务器)接口的配置流程,并重点分享了运行时环境(RTE)生成阶段在多核部署、数据类型匹配等常见陷阱中的避坑方案与调试技巧,旨在帮助汽车电子工程师高效完成配置并规避错误。

uuu88的博客 551

二维码编码选型指南:QR与Data Matrix的原理、区别与工业实践

二维码编码并非只有一种标准,QR Code与Data Matrix虽同属二维码,却在定位方式、容量设计、纠错策略和适用场景上截然不同。QR凭借大容量和手机原生兼容性垄断消费级市场,而DM以极小尺寸和工业级鲁棒性成为产线追溯、电子元件标识的首选。理解二者的编码原理——从RS纠错、矩阵布局到掩码优化与码字交织,是正确选型的基础。在药品监管、激光打标、高速读码等场景中,码制选择直接影响首读率与稳定性。手机会扫QR,工业读码器更青睐DM,但真正决定成败的往往是静区、对比度、模块尺寸等细节。本文结合生成库实践与产线验

weixin_33979203的博客 224

香橙派5上跑DeepSeek-R1的避坑指南:从模型下载到NPU加速全流程解析

本文详细解析了在香橙派5(RK3588)上部署DeepSeek-R1蒸馏模型的完整流程与优化技巧。内容涵盖从系统配置、RKLLM工具链编译、模型转换到NPU加速调优的全过程,重点分享了如何利用RK3588的NPU算力实现高效推理,并提供了常见问题的解决方案,为边缘设备部署LLM提供了实用指南。

CAT789的专栏 717

为什么扫描枪只能扫入数字但是扫不进字母

可以设置shirt 大写英文字母(比如 shift A),shift是换档键,这么设置就表明扫码枪扫入的是大写字母,如果没有shift就只能是小写字母。

谷歌是检验真理的唯一标准的博客 1万+

告别地图偏移!手把手教你用MapOnline V1.2在ArcGIS里加载无偏谷歌影像和历史影像

本文详细介绍了如何使用MapOnline V1.2插件在ArcGIS中加载无偏谷歌影像和历史影像,解决GIS工程师长期面临的地图偏移问题。通过三步安装配置、无偏影像加载和时空分析功能,提升地理信息数据的精确度和工作效率,特别适用于城市规划、环境监测等场景。

weixin_29252171的博客 232

DSPy 入门: 再见提示,你好编程

DSPy("Declarative Self-improving Language Programs (in Python)",发音为 "dee-es-pie")[1] 是斯坦福大学 NLP 研究人员开发的 "基础模型编程 "框架。它强调编程而非提示,并将构建基于 LM 的管道从操作提示转向编程。因此,它旨在解决构建基于 LM 应用程序时的脆弱性问题。DSPy 还将程序的信息流与每一步的参数(提示和 LM 权重)分离开来,为构建基于 LM 的应用程序提供了更系统的方法。

具身机器人和通用AI 3488

解决扫码枪中文输入法冲突问题

解决扫码枪输入input时受中文输入法的影响 首先先了解扫码枪的原理,每次扫码枪扫描相当于执行了 》》扫码的数字+ enter事件 由于搜狗输入法在键入英文时点击enter等于回显,故在输入框里面监听不到enter事件,而且还会出现一些其他的文字 解决方案:type=“password” 是不能输入中文的,故可以使用密码框实现扫码枪中文输入法的问题 <!DOCTYPE html> <html lang="zh_CN"> <meta charset="utf-8"> &lt

张宇的博客 2万+

【docker】--- 详解 WSL2 中的 Ubuntu 和 Docker Desktop 的区别和关系!

在编程的艺术世界里,代码和灵感需要寻找到最佳的交融点,才能打造出令人为之惊叹的作品。而在这座秋知叶i博客的殿堂里,我们将共同追寻这种完美结合,为未来的世界留下属于我们的独特印记。

秋知叶i 1314

解决扫码枪输入input时受中文输入法的影响

<html><head> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> <title>Image preview example</title> </head> <body> <div ...

weixin_30784141的博客 1万+

4、机器人建模、规划与控制及运动学知识解析

本博客深入解析了机器人建模、规划与控制的核心内容,涵盖运动学与动力学的基本原理,并结合典型应用场景探讨了移动机器人与操作器的控制策略。同时,博客还介绍了机器人技术的发展趋势及其在工业和服务领域的广泛应用。

desk3的博客 125

(四)激光线扫描-光平面标定

激光发射器投射出一条线,形成的一个扇形区域平面就是光平面,也叫光刀面,与物体相交就形成了一道线激光。如果物体形状不是规则的,自然相交的线就会是一条蜿蜒曲折的线条。AxByCzD0AxByCzD0从而可以获得图像线激光上像素点的深度。💡 注意:平面方程是在同一个坐标系下定义的(如相机坐标系),所以一旦激光平面标定完成之后,激光器和相机的相对位置就必须固定不动了。

FlyWine的博客 6143

VUE扫码枪中文输入法兼容自动回车事件(下)

password禁用自动历史密码填充功能

MichelleZhai的博客 2091

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。,新界面,新视觉,

【Vue+element-ui】扫码枪输入兼容搜狗输入法

vue 扫码枪兼容搜狗输入法

Anno_O的博客 2393

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

Vue前端解决扫码枪中文状态下扫码获取的编号缺失问题

Vue解决扫码枪输入法中文状态下,扫码缺失问题

weixin_46323078的博客 3590

扫描枪中文输入法导致乱码问题

扫描枪中文输入法导致乱码问题

Henry_rwy的专栏 5236

解决中文状态下扫描枪扫描错误

解决中文状态下扫描枪扫描错误 写作时间:2019-11-7 11:05:39 问题描述 今天项目上遇到反馈过来的问题:前端input输入去后台核对时,使用键盘输入核对成功,使用扫描枪输入核对失败。原因很明显:扫描枪扫出来的字符串肯定是错误的。 后续跟进反馈,中文状态下扫描枪出现这种问题。 大概猜测下,中文状态下扫描快递包裹,比如中通快递单号为: ZT103838237398 ZT103838237...

田乐乐 1万+
上一篇: 通过ngrok等内网映射到外网后 微信禁止访问的问题
下一篇: 前端控制屏幕双屏显示 pos副屏 副屏方案
起风了咦
博客等级 码龄7年 2粉丝 10原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值