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

新手避坑指南:在MacBook上为PyTorch正确配置MPS环境,跑通第一个YOLOv8训练

本文详细指导新手如何在MacBook上为PyTorch正确配置MPS环境,并成功运行YOLOv8训练。从环境准备、PyTorch安装到YOLOv8配置和性能调优,提供全面的避坑指南和实用技巧,帮助开发者充分利用Mac的GPU加速能力。

weixin_29100399的博客 229

S7-200 SMART Modbus RTU从站配置与调试实战指南

本文提供了一份详细的S7-200 SMART PLC配置为Modbus RTU从站的实战指南。内容涵盖从硬件基础、软件准备、指令库调用、核心编程到地址映射与调试排错的完整流程。重点解析了MBUS_INIT与MBUS_SLAVE指令的关键参数配置,并深入探讨了Modbus地址与PLC内部V存储区的对应关系,帮助工程师快速打通通讯链路,实现与上位机、触摸屏等主站设备的稳定数据交互。

potato的博客 756

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

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

weixin_33979203的博客 224

8.2-12.4GHz喇叭天线设计

使用后处理模板的优化算法,对a1、h_horn、b1进行优化,各参数的优化区间即为之前计算得到的参数范围。由于矩形喇叭的辐射特型基本上是E面和H面扇形喇叭的结合,当波导中只是单模传播(只有TE波)时,矩形喇叭的口径可以通过远场公式推理出来。表示矩形喇叭的口径效率,进行最佳增益设计时,一般取值为0.5。从表中可以看出,该结构在8.58GHz的增益误差为2.68%>2.5%,需要对结构进行优化。建模完成,之后就是在矩形波导尾部添加波导端口激励,以及对应频率的远场监视器。,在这里,将频率定为区间的中心频率。

qq_48897427的博客 6663

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

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

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

Docker拉取ubuntu22.04镜像使用ROS2 humble及仿真工具可视化进行导航

Docker中安装Ubun22以及ROS,gazebo可视化等

lovebc的博客 1678

MATLAB应用实战系列(七十七)-基于长时间序列栅格数据的MK检验

1 MK检验介绍 MK检验是曼-肯德尔法,又称Mann—Kenddall 检验法,是一种气候诊断与预测技术,应用Mann-Kendall检验法可以判断气候序列中是否存在气候突变,如果存在,可确定出突变发生的时间。Mann-Kendall检验法也经常用于气候变化影响下的降水、干旱频次趋势检测。目前常用于长时间序列的栅格数据的显著性检验,在植被覆盖度,NDVI,NPP等方面尤为常见。 该检验功能强大,不需要样本遵从一定的分布,部分数据缺失不会对结果造成影响,不受少数异常值的干扰,适用性强。不但可以检验时

wenyusuran的专栏 6291

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

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

张宇的博客 2万+

【网络协议】【TSN】精讲TSN工作原理!图解超赞超详细!!!

TSN有一个服务等级(class of service,CoS)的概念。对TSN网络而言,不同优先级的服务对应图3中的PCP码。3位PCP码定义了0(最低)~7(最高)这8个优先级,传输类型分别对应基础、最大努力、卓越努力、严苛应用、延时和抖动小于100 ms的视频、延时和抖动小于10 ms的音频、内部网络控制、网络控制。其会对网络场景进行不同的匹配,是后续调度、配置设计中会考虑到的数据流调度因素。

风云说通信 2634

解决扫码枪输入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万+

STM32+FreeRTOS环境下LwIP协议栈移植详解

本文详细介绍了在STM32F407ZGT6平台上移植轻量级TCP/IP协议栈LwIP的过程。使用FreeRTOS操作系统和LAN8720A以太网PHY芯片,通过STM32CubeMX生成基础工程配置。重点包括LwIP源码的获取与工程集成、关键配置文件的编写(如lwipopts.h)、操作系统适配层sys_arch.c的实现,以及以太网接口驱动ethernetif.c的移植。文章特别强调内存管理、中断优先级、硬件校验和等关键配置项的注意事项,为基于STM32和LwIP的嵌入式网络开发提供了实用参考。

电脑管家 754

HX711重量传感器原理图设计,已量产(压力传感器)

最近调通了一款针对家用、物联网场景的重量传感套件,核心用了 HX711 这颗经典的称重 AD 芯片,还加了用户最需要的 “一键校准” 功能 —— 之前帮朋友做家用米桶余量报警时,用户总吐槽校准步骤太繁琐,这次的方案把操作简化到只按一个键,试下来体验好了不少。正好拆解下这套硬件的设计逻辑,供做同类产品的朋友参考。

不脱发的程序猿 375

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

vue 扫码枪兼容搜狗输入法

Anno_O的博客 2393

SIMATIC S7-1200, S7-1500 PID 控制[手册]

SIMATIC S7-1200, S7-1500 PID 控制[手册]

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

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

MichelleZhai的博客 2090

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

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

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

weixin_46323078的博客 3590

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件,这是C++版本的破解文件

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

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

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、付费专栏及课程。

余额充值