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

7 篇文章 0 订阅

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

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 是一个用于构建用户界面的渐进式 JavaScript 框架,Vue 能够实现无焦点捕获输入是一种硬件设备,它能够将二维码或条形码的信息转化为可识别的数据。传统上,为了使用,用户需要将光标聚焦于输入框中,然后才能够将对准二维码或条形码进行描。然而,使用 Vue 插件,我们能够实现无焦点捕获输入的功能。 通过在 Vue 组件中使用合适的库或插件,我们可以实现这一功能。这样做的原理是将描结果直接传递给指定输入框,而不需要用户手动聚焦于输入框中。 在 Vue 的生命周期钩子中,我们可以监听设备的事件,如 "scan"。当描到二维码或条形码时,将触发这个事件。我们可以在这个事件中通过 JavaScript 来处理描结果,然后将其赋给指定的输入框。 同时,我们可以借助 Vue 的双向数据绑定功能,实现将描结果的动态更新到其他需要使用这个的地方。 需要注意的是,为了确保无焦点捕获输入的功能正常工作,我们需要在 Vue 组件中的对应输入框上添加适当的事件监听器,以便识别到输入。 总的来说,通过使用 Vue 插件和相关的库或插件,我们可以实现无焦点捕获输入的功能,提高用户的码体验和输入效率。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值