扫码枪的使用

最新推荐文章于 2024-08-23 14:27:28 发布

扶摇的星河

最新推荐文章于 2024-08-23 14:27:28 发布

阅读量1k

点赞数

分类专栏：老年健忘症笔记文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/jiemaio/article/details/122357270

版权

老年健忘症笔记专栏收录该内容

82 篇文章 2 订阅

订阅专栏

VUE element ui 使用扫码枪

<el-input  v-model="sourceCode" @input="inputCode" :type="isScan?'password':'text'" placeholder="溯源码" />

 data() {
    return {
       isScan: false,//是否为扫码枪录入
      sourceCode: '' ,
	}
}

methods

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)
     };

 },

js jQ

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 可以进行隐藏 -->
  <!-- <input id="code" type="text" autofocus="autofocus" style="opacity: 0;"> -->
  <input id="code" type="text" autofocus="autofocus">

</body>

</html>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script type="text/javascript">
  // 判断页面可看状态  false 表示用户能看见 true 表示 用户看不见 
  // setInterval(()=>{console.log(document.hidden)},1000)

  //页面的激活状态  防止用户误操作 此事件监听状态 可明显的进行用户提示操作
  window.onfocus = function () {
    console.log('页面被激活')
  };

  window.onblur = function () {
    console.log('页面失去焦点')

  };
  // document.onmouseover = function () {
  //   console.log("鼠标回来了")

  // }

  // document.onmouseout  = function () {
  //   console.log("鼠标已经移出！")
  // }
  //input自动永久聚焦

  // jq 方式
  // $(document).ready(function () {
  //   $("input").focus();
  // })
  // $("input").blur(function () {
  //   $(this).focus();
  // });
  // 原生方式
  document.getElementById('code').focus()
  document.addEventListener("mousedown", function (e) {
    if (e.target.id !== "code") {
      e.preventDefault()
    }
  }, false);
  let code = ''
  let lastTime, nextTime
  let lastCode, nextCode
  let that = this

  $("input").keyup(function (e) {
    // console.log(e)
    if (window.event) { // IE
      nextCode = e.keyCode
    } else if (e.which) { // Netscape/Firefox/Opera
      nextCode = e.which
    }
    if (e.which === 13) {
      if (code.length < 3) return // 手动输入的时间不会让code的长度大于2，所以这里只会对扫码枪有
      console.log(code)
      console.log('扫码结束')

      var T = $(this).val();// 获取到扫码枪输入的内容，做别的操作

      // 此处可做后续操作

      console.log(T)
      code = ''
      lastCode = ''
      lastTime = ''
      $("input").val('')
      return
    }
    nextTime = new Date().getTime()
    if (!lastTime && !lastCode) {
      console.log('扫码开始。。。')
      code += e.key
    }

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


  })
</script>