WEB端JQuery接入 扫码枪，填入表单内容

时间：2025-04-27 07:33:24

1. 页面有个输入框<input type="text"/>

2. 扫描枪要设置自动Enter，这个说明书上应该有的

3. 页面JQuery代码：

$(document).keydown(function(event) {
    var keyCode = ;
    if(keyCode == "13"){
        var value = $("#elementId");
        //...TODO
    } 
});

4. 如何希望连续获得焦点可以设置$('#elementId').focus()，另外扫描时输入法要切换到英文的状态下
————————————————
版权声明：本文为****博主「小鹿_2015」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：/jys1109/article/details/10066957

vue项目中扫码枪收款 

 

扫码枪会将扫到的数据带入到获取焦点的输入框中，并且触发输入框的enter回车事件

1.自动获取焦点

<el-input v-model="barCode" v-focus size="small"  @="payCode" ></el-input>
 
// 使用directives注册v-focus全局指令
  directives: {
    focus: {
      inserted: function(el) {
        ("input").focus();
      }
    }
  },

2.监听回车事件

payCode(){

//这里进行扫码后的操作

}

 

转载于:/samsara-yx/p/

 

<el-input ref="sm_input" v-model="qrcode"  placeholder="请点击输入框聚焦....." class="sm_input" :autofocus="true" @input="inputSaoMa" ></el-input>

/**
 * 点击处方外流
 */
 handleDrain () {
       = []
       = true
      clearInterval()
       = null
      // 时时聚焦
       = setInterval(() => {
        this.$nextTick(() => {
          // 扫码聚焦
          this.$refs['sm_input'].focus()
        })
      }, 300)
    },
/**
 * 扫码输入中
 */
    inputSaoMa (val) {
      // setTimeout定时器的作用是，等待扫码枪输入完，拿到完整的二维码信息，再调接口（扫码枪输入速度大概8~20毫秒，手动输速度大概是80毫秒），否则拿不到完整的二维信息。
      if (val === '') return false
       = false
      clearTimeout()
       = null
       = setTimeout(() => {
        if ( === val) {
          clearTimeout()
          ('输入完毕')
           = true
           = true
          // 用二维码信息去请求数据
          ({ code: val })
        }
      }, 500)
    },

/**
 * 解码接口
 */
    async decode (data) {
      const res = await decode(data)
       = ''
      if ( !== 200) {
        this.$('二维码解析错误，请核对后重新扫码')
      } else {
        if ( > 0) {
          // 判断去重
          let isReuse = false
          (item => {
            // 交替判断是否存在相同字符串（多次扫码二维码处理）
            let str = 
            let str2 = 
            if ((str2) != -1) {
              isReuse = true
              return false
            }
            if ((str) != -1) {
              isReuse = true
              return false
            }
          })
          (isReuse)
          if (!isReuse) {
            ()
          } else {
            this.$('该处方单已存在')
          }
        } else {
          ()
        }
      }
    },

 

WEB端接入   扫码枪 

常用场景：

 参加活动时 身份查询，活动资格查询；

html页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <script src="__STATIC__/home/js/"></script>
</head>
<body class="hold-transition login-page">
  <form id='but' action="" method="post" >
    <div class="am-u-sm-12 am-u-md-6 " >
        <div class="am-input-group am-input-group-sm">
            <input type="text" id='aname' name="aname" placeholder="手机号" value="" class="am-form-field" >
            <button  class="am-btn"  ></button>
        </div>
    </div>
  </form>
</body>
<script>
     = function(e){
        var code = "";
        var lastTime,nextTime;
        var lastCode,nextCode;

         = function(e) {
            nextCode = ;
            nextTime = new Date().getTime();

            if(lastCode != null && lastTime != null && nextTime - lastTime <= 30) {
                code += (lastCode); 
            } else if(lastCode != null && lastTime != null && nextTime - lastTime > 100){
                code = "";
            }

            lastCode = nextCode;
            lastTime = nextTime;
        }

         = function(e){
            if( == 13){
                $('#aname').val(code); //自动填充到表单
                $('#but').submit();  //自动提交指定的表单
                (code);
                code = "";
            }
        } 
    }

</script>
</html>

这样用JQuery对扫描枪的扫描监控，实现了表单自动填充与提交

喜欢的点桃心，喜欢一下~

相关文章