使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解


Posted in Javascript onJune 10, 2020

下面通过实例代码给大家介绍js扫码枪扫描条形码的实现方法,具体代码如下所示:

var keycode = "";
  var lastTime=null,nextTime;
  var lastCode=null,nextCode;
	document.οnkeydοwn=function(e){
		if(window.event){
			// IE
			nextCode = e.keyCode
		} else if(e.which){
			// Netscape/Firefox/Opera
			nextCode = e.which
		}
		
		//+键,增加新数据行
		if(nextCode==107 || nextCode==187){
			addNewGoodLine();
		} 
		//-键,删除最后一条数据行
		else if(nextCode==109 || nextCode==189){
			$(".new_products:last").remove();
		}
		//字母上方 数字键0-9 对应键码值 48-57
		//数字键盘 数字键0-9 对应键码值 96-105
		else if((nextCode>=48&&nextCode<=57) || (nextCode>=96&&nextCode<=105)){
			//数字键盘的键码值对应的字符有问题,所以手动调整键码值
			var 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(lastCode == null && lastTime == null) {
		  	keycode = String.fromCharCode(nextCode);
		  } else if(lastCode != null && lastTime != null && nextTime - lastTime <= 30) {
		  	keycode += String.fromCharCode(nextCode);
		  } else{
				keycode = "";
			  lastCode = null;
			  lastTime = null;
			}
		  lastCode = nextCode;
		  lastTime = nextTime;
		}
		//13 为按键Enter
		else if(nextCode==13 && keycode!= ""){
			var code = $(".new_products:last .code").val();
			if(code != ""){
				//最后一行已录入数据,重新生成新行
				addNewGoodLine();
			}
			$(".new_products:last .code").val(keycode).blur();
			keycode = "";
		  lastCode = null;
		  lastTime = null;
		}
	}
	
	function addNewGoodLine(){
		//生成新数据行
		var html = '<tr class="new_products">';
			html += '	<td></td>';
			html += '	<td>';
			html += '		<input type="text" class="code" οnblur="getProductDetail()" />';
			html += '	</td>';
			html += '</tr>';
	}
	
	function getProductDetail(){
		//获取商品的详细信息,然后赋值
		
	}

思路:

1.注册onkeydown事件,捕获数字键的按下事件

2.计算按下数字键的时间间隔,若间隔小于30毫秒,则为扫码枪输入

3.捕获Enter案件的按下事件,判断捕获的扫码枪输入数值是否为空,不为空,对相应的文本框赋值,同时触发按找条形码查找商品的方法

总结

到此这篇关于使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解的文章就介绍到这了,更多相关js扫码枪扫描条形码内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jqPlot jquery的页面图表绘制工具
Jul 25 Javascript
prototype与jquery下Ajax实现的差别
Sep 13 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
Mar 13 Javascript
JavaScript DOM节点操作方法总结
Aug 23 Javascript
JavaScript两个变量交换值的实现方法
Mar 01 Javascript
nginx配置React静态页面的方法教程
Nov 03 Javascript
Javascript中的作用域及块级作用域
Dec 08 Javascript
Vue cli+mui 区域滚动的实例代码
Jan 25 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
Feb 09 Javascript
vue实现简单loading进度条
Jun 06 Javascript
vue中实现动态生成二维码的方法
Feb 21 Javascript
JavaScript实现点击切换验证码及校验
Jan 10 Javascript
js 获取扫码枪输入数据的方法
Jun 10 #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
You might like
精致的人儿就要挑杯子喝咖啡
2021/03/03 冲泡冲煮
php使用crypt()函数进行加密
2017/06/08 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
用js做一个小游戏平台 (一)
2009/12/29 Javascript
date.parse在IE和FF中的区别
2010/07/29 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
2010/09/19 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
Javascript中获取对象的原型对象的方法小结
2015/02/25 Javascript
JavaScript中利用Array和Object实现Map的方法
2015/07/27 Javascript
浅谈js构造函数的方法与原型prototype
2016/07/04 Javascript
Javascript使用function创建类的两种方法(推荐)
2016/11/19 Javascript
修改ligerui 默认确认按钮的方法
2016/12/27 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
2017/12/20 Javascript
详解Node.js模板引擎Jade入门
2018/01/19 Javascript
Vue Router的手写实现方法实现
2020/03/02 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
[01:32]DOTA2上海特锦赛现场采访:最想COS的英雄
2016/03/25 DOTA
python操作mongodb根据_id查询数据的实现方法
2015/05/20 Python
pandas 对group进行聚合的例子
2019/12/27 Python
TensorFlow 读取CSV数据的实例
2020/02/05 Python
Python+PyQt5实现灭霸响指功能
2020/05/25 Python
Python实现淘宝秒杀功能的示例代码
2021/01/19 Python
CSS3区域模块region相关编写示例
2015/08/28 HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
办公室前台的岗位职责
2013/12/20 职场文书
军训心得体会
2013/12/31 职场文书
旷课检讨书3000字
2014/02/04 职场文书
演讲稿的写法
2014/05/19 职场文书
班级文化建设标语
2014/06/23 职场文书
校园广播稿100字
2014/10/06 职场文书
公司趣味运动会开幕词
2016/03/04 职场文书
2016年“12.4”法制宣传日活动总结
2016/04/01 职场文书
2019年怎样才能撰写出优秀的自荐信
2019/03/25 职场文书
Redis6.0搭建集群Redis-cluster的方法
2021/05/08 Redis
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis