js获取USB扫码枪数据的方法

 更新时间:2021年09月28日 16:46:21   作者:zlxls  
这篇文章主要为大家详细介绍了js获取USB扫码枪数据的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js获取USB扫码枪数据的具体过程,供大家参考,具体内容如下

废话不多说,直接上代码,这个方法避免了 首字缺失,字符串乱码等等问题,特别好用,记录一下

中间的Ajax可直接调用登录功能,实现自动登录

说明:输入框需要获得焦点,这个是必须的,其次为了防止回车触发手动登录,需要添加οnkeypress="if(event.keyCode==13) return false;"这个操作,这个在回车的时候,输入框焦点不会丢失,除非手动切换焦点,或者调用focus();方法

<div class="form-group">
 <label for="inputUsernameEmail">账号</label>
 <input type="text" placeholder="请输入账号" name="username" id="loginname" class="form-control" autofocus onkeypress="if(event.keyCode==13) return false;">
</div>

代码:

<script>
  window.onload = (e)=> {
   this.start = new Date().getTime()
   let code = ''
   let lastTime, nextTime
   let lastCode, nextCode
   let that = this
   window.document.onkeypress = function (e) {
    if (window.event) { // IE
     nextCode = e.keyCode
    } else if (e.which) { // Netscape/Firefox/Opera
     nextCode = e.which
    }
    console.log('nextCode', nextCode)
    if (e.which === 13 || window.event === 13) {
     var deviceCode = code;
     console.log(code)
     console.log('扫码结束')
     console.timeEnd()
     code = ''
     lastCode = ''
     lastTime = ''
     $.ajax({
      cache: true,
      type: "POST",
      url: rootPath + "/admin/login",
      data: {code: deviceCode, type: 1},
      async: false,
      error: function (request) {
       $("#loginname").val("");
       $.modal.alertError("系统错误");
      },
      success: function (data) {
       $("#loginname").val("");
       if (data.code == 200) {
        location.href = rootPath + '/admin/index';
       } else {
        $.modal.alertError(data.msg);
       }
      }
     });
    }
    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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • JavaScript中的预解析你了解吗

    JavaScript中的预解析你了解吗

    预解析也叫预声明,是提前解析声明的意思,预解析是针对变量和函数来说的,本文将通过一些简单的示例带大家了解一下JS中预解析的具体使用,需要的可以参考一下
    2023-05-05
  • JavaScript实现职责链模式概述

    JavaScript实现职责链模式概述

    这篇文章主要介绍了JavaScript实现职责链模式概述,详细的介绍了什么是职责链模式和实现方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • JavaScript实现广告弹窗效果

    JavaScript实现广告弹窗效果

    这篇文章主要为大家详细介绍了JavaScript实现广告弹窗效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • JavaScript通过HTML的class来获取HTML元素的方法总结

    JavaScript通过HTML的class来获取HTML元素的方法总结

    除了getElementsByClassName()函数,我们可以自己动手编写程式来通过class获取元素,接下来我们整理了一下JavaScript通过HTML的class来获取HTML元素的方法总结,需要的朋友可以参考下
    2016-05-05
  • 微信小程序实战之自定义toast(6)

    微信小程序实战之自定义toast(6)

    这篇文章主要为大家详细介绍了微信小程序实战之自定义toast的相关方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • java、javascript实现附件下载示例

    java、javascript实现附件下载示例

    在web开发中,经常需要开发“下载”这一模块,下面使用java、javascript实现附件下载,需要的朋友可以参考下
    2014-08-08
  • 手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果

    手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果

    这篇文章主要为大家详细介绍了移动web HTML5使用photoswipe模仿微信朋友圈图片放大浏览,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • Javascript实现视频轮播在pc端与移动端均可

    Javascript实现视频轮播在pc端与移动端均可

    用Javascript实现视频轮播,毕竟是客户的需求吗?所以尽量实现下,下面有个实现视频轮播的示例,pc端与移动端均可以实现,感兴趣的朋友可以了解下
    2013-09-09
  • javascript  Error 对象 错误处理

    javascript Error 对象 错误处理

    javascript常见error对象处理,错误代码集合
    2008-05-05
  • js实现简易的英汉词典

    js实现简易的英汉词典

    这篇文章主要为大家详细介绍了js实现简易的英汉词典,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09

最新评论