js 中 实现扫码枪在中文输入法下扫码与实际差异的问题(大小写字母和数字的已没问题特殊字符还不知道咋处理所以没实现特殊字符)

7 篇文章 0 订阅

        在网上找了各种方法针对与扫码枪在中文输入法的情况下键入值异常(与实际不一致的问题)有说用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()
                }
        },

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值