js 获取扫码枪输入数据的方法


Posted in Javascript onJune 10, 2020

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

总结

到此这篇关于js 获取扫码枪输入数据的文章就介绍到这了,更多相关js 获取扫码枪输入数据内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
Jun 02 Javascript
各种常用的JS函数整理
Oct 25 Javascript
iScroll中事件点击触发两次解决方案
Mar 11 Javascript
举例详解JavaScript中Promise的使用
Jun 24 Javascript
详解JavaScript中this关键字的用法
May 26 Javascript
JS实现Ajax的方法分析
Dec 20 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
Jan 13 Javascript
微信小程序教程系列之新建页面(4)
Apr 17 Javascript
JavaScript实现前端分页控件
Apr 19 Javascript
深入理解Vuex 模块化(module)
Sep 26 Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 Javascript
js实现上传图片到服务器
Apr 11 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
Jun 10 #Javascript
使用 UniApp 实现小程序的微信登录功能
Jun 09 #Javascript
详解vue高级特性
Jun 09 #Javascript
vue实例的选项总结
Jun 09 #Javascript
微信小程序中的列表切换功能实例代码详解
Jun 09 #Javascript
vue项目或网页上实现文字转换成语音播放功能
Jun 09 #Javascript
浅谈vue的第一个commit分析
Jun 08 #Javascript
You might like
收集的DedeCMS一些使用经验
2007/03/17 PHP
php 随机排序广告的实现代码
2011/05/09 PHP
smarty简单分页的实现方法
2014/10/27 PHP
Zend Framework教程之模型Model基本规则和使用方法
2016/03/04 PHP
yii2带搜索功能的下拉框实例详解
2016/05/12 PHP
php正则判断是否为合法身份证号的方法
2017/03/16 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
2018/04/20 PHP
laravel批量生成假数据的方法
2019/10/09 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
js 异步处理进度条
2010/04/01 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
2014/11/13 Javascript
JavaScript模拟push
2016/03/06 Javascript
使用JS读取XML文件的方法
2016/11/25 Javascript
微信小程序实现移动端滑动分页效果(ajax)
2017/06/13 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
详解使用React全家桶搭建一个后台管理系统
2017/11/04 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
[01:22]DOTA2神秘商店携大量周边降临完美大师赛
2017/11/07 DOTA
python获取标准北京时间的方法
2015/03/24 Python
Python的自动化部署模块Fabric的安装及使用指南
2016/01/19 Python
深入浅析python继承问题
2016/05/29 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
Python基于codecs模块实现文件读写案例解析
2020/05/11 Python
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
amazeui时间组件的实现示例
2020/08/18 HTML / CSS
美国家用和厨房电器销售网站:Appliances Connection
2020/01/24 全球购物
党员大会主持词
2014/04/02 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
“九一八事变纪念日”国旗下讲话稿
2014/09/14 职场文书
2014年妇委会工作总结
2014/12/10 职场文书
自信主题班会
2015/08/14 职场文书
诗词赏析-(浣溪沙)
2019/08/13 职场文书
Vue Mint UI mt-swipe的使用方式
2022/06/05 Vue.js