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数组组合成字符串的脚本
Jan 06 Javascript
innerText和textContent对比及使用介绍
Feb 27 Javascript
js判断屏幕分辨率的代码
Jul 16 Javascript
js时间戳格式化成日期格式的多种方法
Nov 11 Javascript
jquery解析XML字符串和XML文件的方法说明
Feb 21 Javascript
node.js中的console.error方法使用说明
Dec 10 Javascript
JS中innerHTML和pasteHTML的区别实例分析
Jun 22 Javascript
基于jQuery实现顶部导航栏功能
Dec 27 Javascript
JS将unicode码转中文方法
May 08 Javascript
node.js中EJS 模板快速入门教程
May 08 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
JavaScript常用进制转换及位运算实例解析
Oct 14 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
php异常处理技术,顶级异常处理器
2012/06/13 PHP
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
php使用glob函数快速查询指定目录文件的方法
2014/11/15 PHP
实现PHP+Mysql无限分类的方法汇总
2015/03/02 PHP
yii 2.0中表单小部件的使用方法示例
2017/05/23 PHP
php日志函数error_log用法实例分析
2019/09/23 PHP
Jquery练习之表单验证实现代码
2010/12/14 Javascript
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
在JavaScript中使用timer示例
2014/05/08 Javascript
js实现iframe跨页面调用函数的方法
2014/12/13 Javascript
JS获取网页图片name属性的方法
2015/04/01 Javascript
基于JavaScript实现树形下拉框
2016/08/10 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
2019/01/23 Javascript
VSCode 配置uni-app的方法
2020/07/11 Javascript
vue在图片上传的时候压缩图片
2020/11/18 Vue.js
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
[03:43]TI9战队采访——PSG.LGD
2019/08/22 DOTA
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
Python 安装第三方库 pip install 安装慢安装不上的解决办法
2019/06/18 Python
python实现树的深度优先遍历与广度优先遍历详解
2019/10/26 Python
Python生成器实现简单&quot;生产者消费者&quot;模型代码实例
2020/03/27 Python
HTML5 FileReader对象的具体使用方法
2020/05/22 HTML / CSS
美国知名日用品连锁超市:Dollar General(多来店)
2017/01/14 全球购物
饿了么订餐官网:外卖、网上订餐
2019/06/28 全球购物
介绍一下Make? 为什么使用make
2013/12/08 面试题
我的五年职业生涯规划
2014/01/23 职场文书
公司授权委托书范本
2014/04/03 职场文书
2016年小学植树节活动总结
2016/03/16 职场文书
关于JavaScript 中 if包含逗号表达式
2021/11/27 Javascript
MySQL 执行数据库更新update操作的时候数据库卡死了
2022/05/02 MySQL