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扫码枪数据的代码

前言

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

原理

扫码枪扫描到的条形码每一位会触发一次onkeydown事件

比如扫描条码位‘1234567890'的条形码,会连续执行10次onkeydown事件

条码扫描到最后一位,会直接触发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 获取扫码枪输入数据内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2020-06-08

php获取扫码枪的数据,js 获取扫码枪输入数据的方法相关推荐

  1. html获得剪切板数据,JS 获取chrome剪切板数据

    希望使用JS获取chrome浏览器中剪切板的数据,数据为字符串类型,求大神帮忙解答- 整理自之前自己的一段代码,保证了绝大部分的兼容性. uploader上传用你们自己组件吧 // 粘贴事件的监听 e ...

  2. js获取PC设备信息,js获取手机设备信息,最全

    获取设备系统和型号<封装方法> <!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...

  3. python获取a股数据_python获取A股数据列表的例子

    2015年的股市是当下的热门话题,同事的朋友弄了一个简单的弹股吐槽单页面单日PV就能达30W+ ,相当于本博客一年的PV量.所以站在技术角度,这里也写几篇关于股票技术面的文章.首先本篇先从获取A股列表 ...

  4. js获取android mac地址,JS获取客户端IP地址、MAC和主机名的7个方法汇总

    今天在搞JS(javascript)获取客户端IP的小程序,上网搜了下,好多在现在的系统和浏览器中的都无效,很无奈,在Chrome.FireFox中很少搞到直接利用ActiveX获取IP等的JS脚本. ...

  5. js如何获取计算机当前时间,js获取当前系统时间

    搜索热词 下面是编程之家 jb51.cc 通过网络收集整理的代码片段. 编程之家小编现在分享给大家,也给大家做个参考. var myDate = new Date(); myDate.getYear( ...

  6. php获取post全部数据,PHP获取POST数据的几种方法汇总_PHP教程

    PHP获取POST数据的几种方法汇总 本文给大家汇总介绍了PHP获取POST数据的几种常用方法,这里分享给大家,有需要的小伙伴来参考下吧. 一.PHP获取POST数据的几种方法 方法1.最常见的方法是 ...

  7. js 获取计算机mac地址,JS获取计算机mac地址以及IP的实现方法

    JS获取计算机mac地址以及IP的实现方法 复制代码 代码如下: //这两个是系统里的ActiveX插件   用来获取ip以及物理地址 if(objObject.IPEnabled   !=   nu ...

  8. js获取当前服务器信息,js 获取当前服务器的地址

    js 获取当前服务器的地址 内容精选 换一换 DHCP无法正常获取内网IP,当DHCP无法正常获取内网IP时,不同系统的云服务器表现如下:Linux系统表现为无法获取内网IP.windows系统由于自 ...

  9. android获取wifi信号强度,Native.js 获取当前wifi信号强度

    使用Native.js获取当前WiFi的信号强度: //获取当前WiFi信号强度 function checkWifiSignal() { var Signal = null; var Context ...

最新文章

  1. NuGet 无法连接到远程服务器-解决方法
  2. MATLAB_edge()
  3. synchronized为可重入锁
  4. 从一个程序员的角度看——微信小应用
  5. Java实现从Html文本中提取纯文本
  6. 事业单位综合应用能力计算机,最新事业单位统考-综合应用能力C类梳理精华.pdf...
  7. 一周冲刺计划2//第一天
  8. 分治 —— 莫队算法 —— 普通莫队
  9. scipy常用函数(更新中)
  10. 鸿蒙轻内核源码分析:虚拟文件系统 VFS
  11. 微信小程序开发学习笔记001--认识微信小程序,第一个微信小程序
  12. java多重继承和多继承_Java不支持多重继承,但可以通过 类实现多继承。类的继承具有 性。 (10.0分)_学小易找答案...
  13. Oracle导入大数据量(百万以上)dmp文件,报错ora-12592 :包错误
  14. 蓝桥杯 ALGO-62 算法训练 平方计算
  15. map--Bit Compression
  16. win10c盘扩容_如何给磁盘进行扩容/拆分/合并的操作?保姆级教学
  17. 压缩包密码破解-PkCrack(明文攻击)
  18. 轩辕剑--资料集(三)
  19. ArrayList 重拳出击,把 LinkedList 干翻在地
  20. HTML文字溢出显示省略号和鼠标放在文字上显示全部文字信息

热门文章

  1. 蒙特卡洛能解决啥_用蒙特卡洛方法解决“无法解决”的问题
  2. 标星7000+,这个 Python 艺术二维码生成器厉害了!
  3. python中的timeit模块的用法
  4. Python Flask实现查询和添加数据
  5. asp.net文件上传进度条控件(破解版~没时间限制)多项自定义 .
  6. leetcode4:Median of Two Sorted Arrays
  7. TF2 keras Tensoboard学习总结
  8. c++ idea 插件_IDEA的基本使用:让你的IDEA有飞一般的感觉 CSDN 博文精选
  9. Python3日期时间的操作
  10. 罗德里格斯(Rodrigues)旋转方程推导