vue使用扫码枪获取数据

最新推荐文章于 2025-05-27 10:35:50 发布

代码搬运工娃哈哈呀娃哈哈

最新推荐文章于 2025-05-27 10:35:50 发布

阅读量2.8k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_43666952/article/details/131132249

文章讲述了如何利用JavaScript监听输入框的keydown事件来捕获扫码枪的数据，特别是在Enter键被按下时获取完整扫码内容，然后根据内容类型更新状态，并清空输入框以准备下一次扫描。这种方法避免了SDK对接和连续扫描的累积问题。

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

 <input style="opacity: 0;" type="text"  ref="scannerInput" @blur="sancode" @keydown="getKeyData" />

使用扫码枪获取数据查了很多，要么是直接对接扫码枪SDK ，要么就是监听键盘事件。最后但根据自己的需求选择了keydown事件，通过输入框的keydown事件，监听扫码枪输入完成的Enter事件，获取完整的扫码内容，再对扫码值进行处理，并使用绑定的ref 将输入框清空，不然连续扫码获取的值，字符串累加一起，每次都是累加在后面的。

const getKeyData = (event) => {
    let code = event.target.value.trim();
    if (event.keyCode == 13||event.key =='Enter') {
        // 扫码枪扫描结束，获取输入的数据
        console.log('Scanner data:',code,scannerInput.value.value);
        if (code) {
            console.log(JSON.parse(code).type,JSON.parse(code).No);
            if(JSON.parse(code).type == 'model'){
                state.modelNo = JSON.parse(code).No
            }
            if(JSON.parse(code).type == 'splint'){
               state.splintNo =  JSON.parse(code).No
            }
            scannerInput.value.value= ''
        }
    }
}

扫码枪工作是需要输入框聚焦的，所以点击按钮扫码聚焦到要获取值的输入框，在当前页面的失焦事件中再次获取聚焦动作保持扫码枪工作无误。