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

本文介绍了一种区分扫码枪与键盘输入的方法,通过监测输入时间间隔来判断输入设备,并调整输入框的状态以确保在中文输入法环境下扫码的正确性。

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

        首先了解下为啥要做区分  :在浏览器端 我们没办法去控制 输入法为中文还是其他状态  这时候 如果在中文情况下我们用扫码枪去扫码可能就会偏离我们的预期  因为中文状态下  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
                }
        },

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值