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

最新推荐文章于 2023-12-27 16:45:06 发布

起风了咦

最新推荐文章于 2023-12-27 16:45:06 发布

阅读量2.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js vue 文章标签： javascript vue.js

本文链接：https://blog.youkuaiyun.com/createwrite/article/details/119318348

js 同时被 2 个专栏收录

8 篇文章

订阅专栏

vue

7 篇文章

订阅专栏

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

摘要生成于 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
                }
        },