vue input判断值是扫码枪还是键盘输入

uniapp在PDA手持终端扫码 阅读详情

        首先了解下为啥要做区分  :在浏览器端 我们没办法去控制 输入法为中文还是其他状态  这时候 如果在中文情况下我们用扫码枪去扫码可能就会偏离我们的预期  因为中文状态下  enter会用在把输入信息键入输入框而导致不会执行我们绑定的enter事件 (亲身经历 真的是各种找方案解决,有时输入时间差来判断的  有模拟输入框来判断的) 在尝试后  能满足的 也就输入时间差会靠谱些  

        扫码枪输入的时间间隔一般在8毫秒,偶尔会有16毫秒,而键盘输入一般都在80毫秒以上(大概范围),因此我设定当输入间隔小于等于40毫秒时,判断为扫码枪输入,这时候 我就切换输入框type类型为password类型 否则为text  然后在执行enter事件的时候又恢复为text  初始一下

这种方法有些不太靠谱 因为 你在监听是什么方式录入的时候 并没有打断键入新的值 所以在中文下拿到的值可能还是有问题  又实现了另一种方法监控另一篇文章 可以实现 非特殊字符的按键取值  实现扫码枪在中文输入法下扫码与实际差异的问题

实现流程 

template:

<input 
v-model="inputs" 
:type="isScanningGun?'password':'text'"  
 name="" 
id="inputs" 
 placeholder="请扫描条码"
  @keyup="keydownBarcode()"
 @keydown.enter="clickBarCode(inputs)" />

data:


            inputs: "", //条码扫码保存的数据
            timearr : [0,0],//扫条码记录间隔时长用来判断是不是扫码枪
            isScanningGun:false,//判断是否扫码枪

methods:


        
        /**
         * @title: 录入条码执行的事件
         * @description: 
         * @auther: 田保平
         * @param {String}} inputs 条码
         * @return {*}
         */
        clickBarCode(inputs) {
            //  先初始化输框为text
            this.isScanningGun=false
            //下面执行其他操作 
              ..........
        },
        keydownBarcode(){
                if(this.inputs.length%2 != 0 ){
                    //求余数不为0是奇数
                    this.timearr[0] = new Date().getTime();
                }else{
                    this.timearr[1] = new Date().getTime();
                }
                    //当输入第二位时判断两次输入的间隔,判断是否为手动输入,间隔过长就是手动
                if(this.inputs.length > 1 && Math.abs(this.timearr[1] - this.timearr[0])<40){
                    this.isScanningGun=true
                }
        },

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

相关推荐

别再让搜狗输入法坑了你的扫码枪!一个input[type=password]的奇技淫巧搞定所有中文乱码

本文深入分析了扫码枪在中文输入法环境下出现乱码的技术原因,并提出了利用`<input type="password">`特性实现零误差采集的创新解决方案。通过密码框强制禁用输入法组合的特性,有效解决了搜狗、微软等输入法导致的字符丢失问题,适用于零售、仓储等行业的高效数据采集场景。

weixin_30505225的博客 586

uniapp监听扫码枪键盘事件|无输入框式监听

这篇文章,是纯借鉴下面这一篇文章的,感觉下面这一篇文章写的非常好一般的扫码枪通过USB或蓝牙连接手机或电脑,充当的是一个外接设备。当扫码后,扫码枪会自动识别内容,然后向连接的电脑或手机发送keydown或keyup。

hcy5201314521的博客 4753

JSAPI微信支付(小程序)V3版本JAVA代码实战源码

1.1、商户通过JSAPI/小程序下单接口获取到发起支付的必要参数prepay_id后,再通过微信小程序调起微信支付收银台JSAPI/小程序下单_JSAPI支付|微信支付商户文档中心1.3、微信H5发起类似,结合文档,细微调整,前端返回类似,参考文档修改为微信内置浏览器调起支付即可。

java web 708

Vue获取扫码枪输入内容(可一定程度无视输入法)

Vue获取扫码枪输入内容(可一定程度无视输入法)背景环境前提方案一、隐藏密码框法代码测试优点缺点结果二、输入时间间隔法代码测试优点不足结果三、页面事件监听+输入事件间隔法代码调用组件方组件方测试优点不足结果 背景 WMS项目需要使用扫码枪,但当我输入法为中文输入法时,扫码枪输入会出现中文或者缺字母少数字的情况,尝试了不少方法,最终于找到了一种比较合适的解决办法。 环境 名称 内容 语言 Vue、ElementUI、Js 扫码枪 型号OBM-3802 前提 经过不停的扫码和观察,发现了

m0_46267097的博客 1万+

433MHz无线通信避坑指南:如何解决信号干扰和误码问题

本文深入探讨433MHz无线通信中的信号干扰和误码问题,提供从射频前端设计到协议优化的全链路解决方案。通过天线匹配、电源噪声抑制、曼彻斯特编码改进及实时频点切换等技术,显著提升通信稳定性和距离。适合智能家居和工业无线控制系统的开发者参考。

weixin_29288313的博客 421

别再只盯着YOLOv8了!手把手带你用PaddleDetection的PP-YOLOE+搞定你的第一个检测项目

本文介绍了PP-YOLOE+在目标检测领域的优势与应用实践,对比YOLOv8展示其在精度、速度和部署便利性上的突破。通过详细的代码示例和实战教程,帮助开发者快速上手PaddleDetection工具链,实现产业级目标检测项目,提升开发效率。

weixin_42701915的博客 186

Vue项目判断Enter回车事件是直接按键盘触发还是扫码枪触发

Vue项目判断Enter回车事件是直接按键盘触发还是扫码枪触发 原因叙述:我们知道键盘事件包括keyDown、keyPress和keyUp三个;然后扫码触发的Enter事件是很快的,一般在10毫秒左右,而直接按键盘触发的Enter相对来说比较慢80毫秒左右。在keyDown【按下】的时候,我们记录一个keyDownTime时间,在keyUp【弹起】的时候,我们又记录一个keyUpTime时间,之后两个相减小于30毫秒【keyUpTime-keyDownTime<30】,我们可以判断是扫码触发的还是直接

qq_32868369的博客 4299

通过EMIF接口实现FPGA与DSP的高速连接(方法)

请注意,具体的连接细节和步骤可能会根据所使用的FPGA和DSP型号以及特定的应用需求而有所不同。开发DSP和FPGA上的软件,以实现数据交换和处理。根据系统的具体需求,对FPGA和DSP的接口逻辑进行优化,以减少延迟、提高数据吞吐量或降低资源消耗。它通常支持多种类型的存储器,如SRAM、DRAM、ROM等,以及通过特定的接口与FPGA连接。对于FPGA,需要编程来实现与DSP的接口逻辑,包括地址译码、数据传输、时序控制等。在连接完成后,进行详细的调试和测试,以确保数据能够在DSP和FPGA之间正确传输。

AigcFox的博客 4590

python读取usb扫码枪数据_vue扫码枪input接收数据

1.使用场景vue 项目, 需要用扫码枪完成获取二维码中内容并进行处理的功能, 扫码枪就是普通那种,先找到一个有焦点的input,然后扫码枪工作,将扫描到的信息录入到input中,必须要有焦点。打开modal,后input自动聚焦,出现焦点(就是那个一闪一闪的杠杠)。点击其他位置的时候焦点丢失,然后立即回来,防止用户误点击后,再扫码,找不到焦点就得不到数据。2.代码title="订单详情"@can...

weixin_39899021的博客 1616

我用两个月时间,终于把优快云付费资源项目玩明白了!

关于项目的定位,这是一个知识付费项目,根据市场研究机构的数据显示,到2023年,全球知识付费市场规模将达到2000亿美元,所以说知识付费的前景是十分广阔的,当下互联网时代信息大爆炸,80后、90后、00后群体对知识付费的认可度也大幅提升,同时这群作为知识付费的主流人群已经具备了更强的消费能力,而且对于知识付费的需求更高。目前整个知识付费领域仍然在发展起步的初期,尽快在知识付费领域布局可以帮助我们在这波红利中获得一份不错的收益。而且个人认为,

白话机器学习 2万+

ABAP Cloud:面向云时代的 ABAP 开发范式与实践指南

摘要: 本文系统讲解SAP ABAP Cloud开发模型,涵盖其架构、工具链、规范及实践。ABAP Cloud作为统一开发模型,支持在SAP BTP和S/4HANA上构建云就绪应用,遵循clean core原则,通过RAP(RESTful应用编程模型)实现低耦合扩展。文章详细解析其核心构成(RAP、稳定API、clean core约束)、工具链(ADT、软件物流)及两种典型扩展场景(on-stack与side-by-side),并附可运行RAP示例代码(如销售笔记应用)。重点强调通过规范开发确保系统可升级性

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 413

vue对接扫码枪(vue)

vue对接扫码枪 因为公司的需求,需要接入扫码枪进入系统,所以有了这篇文章,我这边框架用的是是element ui的。 首先得解决怎么去触发提交到后台的问题,扫码枪只能扫描出条形码的内容,类似于触发键盘输入的效果,但是和普通的键盘输入又所区别的是,扫码枪每次扫描完之后,是会有一个回车的效果,所以我观察到element ui的表单里当只有一个intput输入框的时候,他是能够触发自动提交的事件的。 于是就有了一下代码 但是为了方便,我们需要能够让input输入框能够自动聚焦,可以实现连续的处理扫码,很方便的

wwh123963的博客 1万+

使用Zed 实现测距

此代码基于官方代码基础上进行改写,主要是获取zed相机深度画面的深度值,为yolo测距打基础。Zed相机是由Stereolabs公司开发的一种先进的立体视觉相机。这种相机专为计算机视觉和机器学习应用而设计,能够提供高质量的3D捕捉和分析功能。: Zed相机配备有一对垂直排列的传感器,能够捕捉两个略有偏移的图像,从而模拟人的双眼视觉,实现深度感知。: 利用立体成像技术,Zed相机能够实时生成环境的3D模型,这对于机器人导航、增强现实(AR)和虚拟现实(VR)等应用至关重要。

weixin_45303602的博客 913

扫码枪的使用

VUE element ui 使用扫码枪 <el-input v-model="sourceCode" @input="inputCode" :type="isScan?'password':'text'" placeholder="溯源码" /> data() { return { isScan: false,//是否为扫码枪录入 sourceCode: '' , } } methods openCodeListDialog(

jiemaio的博客 1314

2 硬件工程师笔面试高频知识考点真题解析——电容

本文全面解析了电容在电子电路中的关键应用与技术要点。主要内容包括:1. 电容选型核心要素:介质材质(陶瓷/电解/钽电容等)、容值精度、耐压等级、温度特性、ESR参数等,不同应用场景(滤波/去耦/谐振等)的选型策略。2. 典型电路应用原理:详细阐述去耦电容布局规则、晶振负载电容作用、共射放大电路旁路电容功能,以及RC电路的滤波/定时等应用。3. 特殊问题解决方案:MLCC啸叫机理与对策、寄生电容影响与消除、高速信号线电容使用禁忌等工程实践难题。4. 安全规范要点:X/Y电容的区别与选用、电解/钽电容防反接措施

XU157303764的博客 1566

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

js通过扫描枪快速扫码录入的功能实现(区分手动输入和扫码枪录入)-pc

扫码录入实践实践背景需要解决的问题代码实现最终代码结语 实践背景 在近期工作过程中接手了一个让我有些棘手的需求,需求如下: 输入框内支持扫码录入商品,且支持连续扫码录入。 相同输入框中支持手动输入条码录入商品。 页面任意位置用扫码枪扫码都可以成功定位到该输入框且录入对应商品。 需要解决的问题 事件注册在那里 事件注册什么时候注册,什么时候注销。 如何不影响页面上其他input元素 如何区分手动输入和扫码枪录入 代码实现 事件注册什么时候注册,什么时候注销 因为我们要注册的为全局事件,但是又不能影响

白开水丶 9735

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

web实现usb扫码枪读取二维码数据功能

通过上面介绍可以看出usb扫码枪虽然使用简单,但是限制多,只能满足一些特定场景,对用户一些不确定操作可能会影响读取成功率,这个时候也可以从产品设计上引导用户主动触发聚焦减少用户乱点击频率,提高成功率。

前端(全栈)、AI Agent开发技术分享 8288

文档:亲测可用解决vnc灰屏,黑屏,鼠标大黑叉情况

主要解决vnc-viewer灰屏,黑屏,鼠标大黑叉等现象,详细见文档。

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

el-input录入扫码枪数据引起的血案

今天在处理客户需求的时候,客户提出了一个严重性的问题,发现在el-dialog中嵌套el-form,在el-from中有个邮单编码是用扫码枪录入的,需求明确需要录入多条,但是由于我们开发时没有用扫码枪测试该功能,后来客户发现,每次只能录入一个,然后路由就跳转了,也不能提交数据。 如下图 扫码枪录入数据后 可以看到路由后面拼接了问号,想要调转路由。 我和我的小伙伴陷入了沉思。。。 ...

车联网开发的博客 1830

移动端如何在前端阻止input框获得焦点时手机键盘的弹出

在文章的开始,我先把我的目的说明一下:在移动端,如何在前端实现input框获得焦点的同时不会唤起手机键盘。 在做公司项目的时候遇到这样一个问题,因为项目需要在ubuntu、window、android端都可以执行,其中ubuntu环境下是没有键盘的,而且为了方便对输入的内容有所控制,我们用vue分别写了一个数字键盘和一个英文键盘,input框都用d...

DACBE的博客 2万+

pda扫描mysql,获取pda扫码枪 扫描的数据

1.扫码枪是模拟键盘输入的,输入一连串数字后加一个enter键。所以可以监听键盘事件。新建一个隐藏的 input 用来接收数据,不然扫码枪会自动获取页面存在的一个input的焦点,并将数据显示在input框中。type="text"v-model="myvalue"id="inputId"placeholder=""size="normal"clearableclass="inputShow"&g...

weixin_30245667的博客 789

vue项目中扫码枪收款

扫码枪会将扫到的数据带入到获取焦点的输入框中,并且触发输入框的enter回车事件 1.自动获取焦点 <el-input v-model="barCode" v-focus size="small" @keyup.enter.native="payCode" ></el-input> // 使用directives注册v-focus全局指令 ...

weixin_30783629的博客 4831

Vue 扫码枪或扫描仪获取数据到input框

扫描仪到输入过程中,通过控制键盘触发keyboardEvent事件,将数据输入到input框中,并在最后会触发一次Enter事件,所以最终我选择在input框的@keyup事件中对数据进行处理。自助机客户端插入硬件少扫描仪,需要扫描二维码或者条形码获取办件编号到input框。由于扫描数据输入过快,会导致数据丢失情况。方法二:页面事件监听+输入时间间隔法。

qq_45345113的博客 3181

扫码枪扫码后触发方法

扫码枪扫码后触发方法 先生成一个二维码,都知道二维码传递的信息就是一串字符,而扫码枪扫码后可以将二维码的信息自动输入至文本框。 再在html页面写一个input(textarea),input(textarea)用来接收二维码信息。 在js中写个ready事件,打开页面后input自动永久聚焦。(注意:引用jquery插件) <script type="text/javasc...

程序员之道 8504
上一篇: 微信公众平台测试帐号申请及Token验证地址提供
下一篇: 通过ngrok等内网映射到外网后 微信禁止访问的问题
起风了咦
博客等级 码龄7年 2粉丝 10原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值