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. 色彩(颜色)空间原理(实现代码)
  2. RIM发警告 部分黑莓手机存在安全漏洞
  3. Android开发之拍照功能实现
  4. linux octave源码安装,在Linux操作系统上安装Octave的方法
  5. 计算机课禁用监视器,如何设置关闭监视器硬盘系统待机项为从来不
  6. 三年后见!雷军透露年轻人的第一台汽车售价......
  7. element UI表格使用cell-style改变单元格样式
  8. ios开发自定义Cell分割线(分隔线)选中(点击时)时消失
  9. Hibernate框架入门
  10. 9.2 配置rsync+inotify实时同步
  11. VXLAN 技术解析-(1)VXLAN简述
  12. 现代工程制图及计算机辅助绘图答案,现代工程制图(附习题集第2版高等学校应用型特色规划教材)...
  13. 在夕阳再晨的日子里(一)----部员的成长
  14. 仿微信设置字体大小控件
  15. 光纤跳线选用指南及光模块连接方案
  16. 如何实现app直播源代码,通过HLS进行直播观看
  17. Excel表列名称(基本实现)
  18. 元数据管理——企业数据治理的基石
  19. 如何搭建苹果虚拟服务器降级,ios14怎么降级13.6 苹果iOS14降级超详细教程
  20. 计算机桌面模糊了,显示屏模糊,详细教您怎么解决电脑屏幕模糊

热门文章

  1. bec初级第一课_在您的第一个初级开发人员工作中如何生存和发展
  2. int(a) 和 (int ) a 及 数据存储地址的探究
  3. python帮助文档在哪_python文档之查看帮助文档方法
  4. Xamarin:安卓通过“第三发应用打开”实现文件跨应用传输
  5. 冒泡排序法 - python版详解
  6. Python学习杂记之静态网页学习
  7. 如何理解np.sum tf.reduce_sum( tf.reduce_max tf.reduce_mean)等对tensor和高维矩阵的axis选择的操作
  8. 为ie和chrome FF单独设置样式的“条件注释法”、“类内属性前缀法”、“选择器前缀法”、实现方法 案例(推荐)
  9. 利用正则表达式提取网页中Table内的数据
  10. ASP.NET 3.5中的ListView控件和DataPager控件(二)