最新公告
  • 欢迎您访问爱上源码网,分享精品整站源码,网站模板,游戏源码,APP小程序源码以及视频教程免费下载;服务永无止境!立即加入我们
  • 一起看看js获取扫码枪输入数据的方法

    爱上源码网文章一起看看js获取扫码枪输入数据的方法的内容插图

    1、扫码枪相当于键盘输入设备,输入一连串数字后加一个enter键。但在实际开发中需要区分是扫描枪输入还是键盘用户输入,区别在于扫码枪输入很快。

     let code = '';
       let lastTime, nextTime;
       let lastCode, nextCode;
       window.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,所以这里只会对扫码枪有
    
         console.log(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;
       }

    PS:下面看下js获取USB扫码枪数据的代码

    前言

    找了很多相关的教程不太好用,汲取各家之长总结精简了一下

    原理

    1. 扫码枪扫描到的条形码每一位会触发一次onkeydown事件
    2. 比如扫描条码位‘1234567890’的条形码,会连续执行10次onkeydown事件
    3. 条码扫描到最后一位,会直接触发Enter

    需要引入jQuery,我这里用的是vue

    window.onload = (e)=> {
      document.onkeydown = (e)=> {
      	let nextCode,nextTime = '';
      	let lastTime = this.lastTime;
      	let code = this.code;
        if (window.event) {// IE
          nextCode = e.keyCode
        } else if (e.which) {// Netscape/Firefox/Opera
          nextCode = e.which
        }
        nextTime = new Date().getTime();
        //字母上方 数字键0-9 对应键码值 48-57; 数字键盘 数字键0-9 对应键码值 96-105
        if((nextCode>=48&&nextCode<=57) || (nextCode>=96&&nextCode<=105)){
        	let codes = {'48':48,'49':49,'50':50,'51':51,'52':52,'53':53,'54':54,'55':55,'56':56,'57':57,
    			 '96':48,'97':49,'98':50,'99':51,'100':52,'101':53,'102':54,'103':55,'104':56,'105':57
    			};
    			nextCode = codes[nextCode];
    			nextTime = new Date().getTime();
        }
        // 第二次输入延迟两秒,删除之前的数据重新计算
        if(nextTime && lastTime && nextTime-lastTime>2000){
    			code = String.fromCharCode(nextCode);
        }else{
        	code += String.fromCharCode(nextCode)
        }
        // 保存数据
        this.nextCode = nextCode;
        this.lastTime = nextTime;
        this.code = code;
      	// 键入Enter
        if(e.which == 13) {
          // 判断 code 长度(这里就获取到条码值了,以下业务自由发挥)
          	code = $.trim(code)
          if (code.length == 13) {
            this.$message('A类条码:' + code);
          } else if (code.length == 23) {
    				this.$message('B类条码:' + code);
          } else if (code.length == 0) {
    				this.$message('请输入条码');
          } else{
          	this.$message('条码不合法:' + code);
          }
          //键入回车务必清空code值
        	this.code = ''
        	return false;
        }
      }
    }

    相关学习推荐:javascript视频教程

    以上就是一起看看js获取扫码枪输入数据的方法的详细内容,更多请关注爱上源码网其它相关文章!

  • 微信
  • 分享
  • 相关标签:javascript 扫码枪
  • 本文转载于:jb51,如有侵犯,请联系916990011@qq.com删除
    • 上一篇:代码详解Vue中key的作用示例
    • 下一篇:带你了解js中[]、{}、()区别(详解)

    相关文章

    相关视频

    • 硬件接口-PHP 使用扫码枪获取内容
    • jQuery监听扫码枪禁止手动输入的实现方法
    • 了解Typescript和Javascript之间…
    • 聊一聊JavaScript 中的 URL 对象
    • 一起看看js获取扫码枪输入数据的方法
    • JavaScript Number 对象
    • javascript常用的数据结构
    • JavaScript基础篇——了解js

    本文有爱上源码下载完入驻作者发布,如果对您版权造成侵害,可以联系本站站长管理进行维权删除,本站收到维权24小时内进行处理,谢谢您关注23ym.cn!
    本站分享大量程序员技术文章以及对编程开发的初级入门教程,包括图文讲解笔记和高清视频下载~

    重要声明:
    1.本站视频教程,软件及网站源码版权均属于原作者所有,您必须在下载后的24个小时之内,从您的电脑中删除!非法商业用途,后果自负!
    2.本站不保证所提供下载资源的安全性和完整性,仅供下载学习之用!如链接失效或资源含外站广告,请联系客服处理!给予奖励!
    3.本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!本站提供有偿服务!如有侵权请联系在线客服!
    4.如您手中有优质资源或教程,可以自助投稿发布,成功分享后有奖励和额外收入!
    5.如您需要正版微擎模块可联系本站客服,我们有价值30w+商业微擎应用出售微擎坑位和招收代理!
    6.400电话/软著/ICP,EDI许可证/商标特价办理中!
    爱上源码下载网 » 一起看看js获取扫码枪输入数据的方法

    常见问题FAQ

    从网站下载的源码都有安装教程么?不会安装怎么办?
    本站发布的网站源码和模板资源大部分在压缩包内都有教程,如您不会安装可以联系本站在线技术进行付费安装。
    爱上源码的所有源码都是亲测能正常运行的么?
    本站目前拥有资源10w+,包含整站源码,网站模板,游戏源码,小程序源码,视频教程,破解软件等,每天也在测试更新;因时间和精力有限我们无法对资源进行一一测试,只能保证所分享资源内容无误,希望理解。
    我手中的优质资源可以在你这换钱或者VIP么?
    爱上源码支持投稿,欢迎发布您手中的优质资源进行售卖;本站VIP支持免费获取,目前邀请10人注册爱上源码即可免费获取VIP。
    爱上源码除了资源分享还有其他业务没?
    【价值30W+微擎模块出售正版商业微擎坑位及招收代理,详情咨询本站客服!】我们团队目前运营并推广几套商业化saas智能小程序系统能满足大部分小程序开发需求,并由SaaS和独立部署版商城小程序系统;另外销售400电话,各种ICP/EDI资质证书办理,软著和商标注册服务等。

    发表评论

    • 28会员总数(位)
    • 35644资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 539稳定运行(天)

    提供最优质的资源集合

    开通VIP 源码下载