js监听页面扫码枪

发布时间：2022-07-26, 17:01:48 分类：HTML | 编辑 off 网址 | 辅助

正文 2378字数 328,452阅读

// 扫码枪
    var code = "";
    var lastTime, nextTime;
    var lastCode, nextCode;
    document.onkeypress = function (e) {
        if (window.event) { // IE
            nextCode = e.keyCode;
        } else if (e.which) { // Netscape/Firefox/Opera
            nextCode = e.which;
        }
        if (nextCode === 13) {
            if (code.length < 3) return; // 手动输入的时间不会让code的长度大于2，所以这里只会对扫码枪有

            console.log(code); // 获取到扫码枪输入的内容，做别的操作
            
            // 得到扫码枪的值,请求数据库,返回结果
            $.ajax({
                type: "POST",
                url: "{:url('barcode_select')}",
                data: {barcode: code},
                dataType: "json",
                success: function (res) {
                    if (res.code == 0){
                        var data = res.data

                        var shop_name = '';
                        for(var i = 0; i < (data.shopinfo).length; i++){
                            shop_name = data.shopinfo[i].name + '和' + shop_name
                        }
                        var shop_str = shop_name.substr(0, shop_name.length-1);

                        // 给搜索框赋值并搜索
                        $("#keys").attr("value", data.barcode);
                        $("#search").click();

                        // 拼接需要语音播报的值
                        var str = data.goods_name + data.color + data.size_name + '属于' +shop_str
                      
                        // 调用语音播报的方法
                        speckText(str);

                    }else {
                        console.log('111')
                    }
                },error: function (error) {
                    console.log(11)
                }
            });

            code = '';
            lastCode = '';
            lastTime = '';
            return;
        }
        nextTime = new Date().getTime();
        if (!lastTime && !lastCode) {
            code += e.key;
        }

        if (lastCode && lastTime && nextTime - lastTime > 30) { // 当扫码前有keypress事件时,防止首字缺失
            code = e.key;
        } else if (lastCode && lastTime) {
            code += e.key;
        }
        lastCode = nextCode;
        lastTime = nextTime;
    }

Run code

Cut to clipboard

（支付宝）给作者钱财以资鼓励（微信）→

有过 5 条评论 »

广西南宁市 2022-07-26, 17:24:02

openCodeListDialog(row) {
console.log(row)
     this.$refs.codeList.open(row)
 },
 /* 监听输入 判断通过isScan判断 */
 inputCode(v) {
   console.log(v)
     if (this.isScan) return;
     this.code = v
 },
 //处理扫码枪获取的数据
 dealScan(code) {
     this.isScan = false
     this.sourceCode = code.substring(code.length - 12);//取出后12位 
 },
 scanCode() {
   console.log(1)
     let lastTime = null;
     let nextTime = null;
     let code = '';
     let timer = ''
     //监听数据录入 通过判断输入数据的速度来判读是手动输入还是扫码枪录入,
     //这里有一个问题 当用户同时按下两个按键或者故意以高速录入数据时也会被判定为扫码枪输入
     document.onkeydown = e => {
       console.log(e)
         let keycode = e.keyCode || e.which || e.charCode;
         nextTime = new Date();
         if (keycode === 13) {
             if (lastTime && (nextTime - lastTime < 30)) {
                 // 扫码枪
                 this.dealScan(code)
             } else {
                 // 键盘
                 console.log('键盘输入')
             }
             code = '';
             lastTime = null;
             e.preventDefault();
         } else {
             if (!lastTime) {
                 code = String.fromCharCode(keycode);
             } else {
                 if (nextTime - lastTime < 30) {
                     code += String.fromCharCode(keycode);
                     item.isScan = true
                 } else {
                     code = '';
                     item.isScan = false
                 }
             }
             lastTime = nextTime;
         }
         //添加定时器 防止用户输入过快导致的误判 
         timer = setTimeout(_ => {
             clearTimeout(timer)
             this.isScan = false
         }, 100)
     };

 },

reply | quote | #¹

广西南宁市 2022-07-26, 17:24:28

//监听扫码枪
function ListenScanCodeGun() {
    var barCode = '';
    var lastTime = 0;
    function ClearBarCode() {
        barCode = '';
        lastTime = 0;
    }
    window.addEventListener('keypress', function (e) {
        console.log("监听开始");
        e = e || window.event;
        var currCode = e.keyCode || e.which || e.charCode;
        var currTime = new Date().getTime();
        if (lastTime > 0) {
            if (currTime - lastTime <= 100) {
                barCode += String.fromCharCode(currCode);
            }
            else if (currTime - lastTime > 500) {
                // 输入间隔500毫秒清空
                ClearBarCode();
            }
        }
        else  // 第一次按键
        {
            barCode = String.fromCharCode(currCode);
        }
        lastTime = currTime;

        if (currCode == 13)  // 回车
        {
            if (barCode && barCode.length >= 8) {
                // 这里得到码，做下一步业务处理
                console.log("最终编号：" + barCode);
            }
            // 回车输入后清空
            ClearBarCode();
        }
    });
}

reply | quote | #²

广西南宁市 2022-07-26, 17:24:58

<script>
export default {
  data() {
    return {
    }
  },
  mounted() {
    // 监听按键
    var code = ''
    var lastTime, nextTime // 上次时间、最新时间
    var lastCode, nextCode // 上次按键、最新按键
    document.onkeypress = (e) => {
      // 获取按键
      if (window.event) { // IE
        nextCode = e.keyCode
      } else if (e.which) { // Netscape/Firefox/Opera
        nextCode = e.which
      }
      // 如果触发了回车事件(扫码结束时间)
      if (nextCode === 13) {
        if (code.length < 3) return // 手动输入的时间不会让code的长度大于2，所以这里只会对扫码枪有

        this.codeFind(code) // 获取到扫码枪输入的内容，做别的操作

        code = ''
        lastCode = ''
        lastTime = ''
        return
      }
      nextTime = new Date().getTime() // 记录最新时间
      if (!lastTime && !lastCode) { // 如果上次时间和上次按键为空
        code += e.key // 执行叠加操作
      }
      // 如果有上次时间及上次按键
      if (lastCode && lastTime && nextTime - lastTime > 30) { // 当扫码前有keypress事件时,防止首字缺失
        code = e.key
      } else if (lastCode && lastTime) {
        code += e.key
      }
      lastCode = nextCode
      lastTime = nextTime
    }
  },
  methods: {
    // 业务逻辑根据项目更改
    codeFind(code) {
      if ([123456, 789101].indexOf(code) >= 0) {
        alert('code已经存在')
      }
    }
  }
}
</script>

reply | quote | #³

广西南宁市 2022-07-26, 17:26:46

vue使用扫码枪，全局监听

全局监听扫码枪的扫码数据
在 src 下新建文件 scanCode.js，并在 main.js 引入即可

scanCode.js

import store from './store'
function scanCode() {
  let str = ''
  document.onkeydown = function() {
    if (event.target.tagName !== 'BODY') {
      str = ''
    } else {
      if (event.keyCode !== 13) {
        if (event.keyCode >= 32 && event.keyCode <= 126) {
          let k = event.key
          str += k
        }
      } else {
        if (str) {
          store.commit('scanCode/SET_SCANSTRING', str)
        }
        str = ''
      }
    }
  }
}

export default scanCode()

main.js

import Vue from 'vue'
import App from './App'
import store from './store'
import router from './router'
import './scanCode' // 扫码

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

增加扫码的vuex
在modules中新建文件scanCode.js，并在getters.js中增加scanString: state => state.scanCode.scanString


export default {
  namespaced: true,
  state: {
    // 扫码的值
    scanString: ''
  },
  mutations: {
    SET_SCANSTRING: (state, scanString) => {
      state.scanString = scanString
    }
  }
}

监听vuex中scanString的变化


export default {
  computed: {
    scanString() {
      return this.$store.getters.scanString
    }
  },
  watch: {
    scanString(s) {
      if (s) {
        setTimeout(() => {
          // 触发事件 你要做的事
          alert(s)
          // 执行结束后重复为空
          this.$store.commit('scanCode/SET_SCANSTRING', '')
        }, 100)
      }
    }
  }
}

reply | quote | #⁴

广西南宁市 2022-07-26, 17:27:15

// 监听按键
var code = ''
var lastTime, nextTime // 上次时间、最新时间
var lastCode, nextCode // 上次按键、最新按键
document.onkeypress = (e) => {
  // 获取按键
  if (window.event) { // IE
    nextCode = e.keyCode
  } else if (e.which) { // Netscape/Firefox/Opera
    nextCode = e.which
  }
  // 如果触发了回车事件(扫码结束时间)
  if (nextCode === 13) {
    if (code.length < 3) return // 手动输入的时间不会让code的长度大于2，所以这里只会对扫码枪有

    this.codeFind(code) // 获取到扫码枪输入的内容，做别的操作

    code = ''
    lastCode = ''
    lastTime = ''
    return
  }
  nextTime = new Date().getTime() // 记录最新时间
  if (!lastTime && !lastCode) { // 如果上次时间和上次按键为空
    code += e.key // 执行叠加操作
  }
  // 如果有上次时间及上次按键
  if (lastCode && lastTime && nextTime - lastTime > 30) { // 当扫码前有keypress事件时,防止首字缺失
    code = e.key
  } else if (lastCode && lastTime) {
    code += e.key
  }
  lastCode = nextCode
  lastTime = nextTime
}

reply | quote | #⁵

Records:5 1/1 «‹1 ›»

lizhenqiu blog

相关日志

有过 5 条评论 »

留下評論