使用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 相关文章推荐
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
Sep 28 Javascript
jquery.validate的使用说明介绍
Nov 12 Javascript
JS求平均值的小例子
Nov 29 Javascript
javascript使用定时函数实现跳转到某个页面
Dec 25 Javascript
解决json日期格式问题的3种方法
Feb 02 Javascript
JS+CSS实现可拖动的弹出提示框
Feb 16 Javascript
javascript弹性运动效果简单实现方法
Jan 08 Javascript
Vue-Router2.X多种路由实现方式总结
Feb 09 Javascript
在Vue项目中使用d3.js的实例代码
May 01 Javascript
基于vue.js组件实现分页效果
Dec 29 Javascript
微信小程序实现导航栏和内容上下联动功能代码
Jun 29 Javascript
OpenLayers3实现鼠标移动显示坐标
Sep 25 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
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
教你php如何实现验证码
2016/01/20 PHP
PHP如何使用Memcached
2016/04/05 PHP
laravel自定义分页的实现案例offset()和limit()
2019/10/15 PHP
DWZ table的原生分页浅谈
2013/03/01 Javascript
javascript连续赋值问题
2015/07/08 Javascript
Bootstrap实现登录校验表单(带验证码)
2016/06/23 Javascript
关于javascript事件响应的基础语法总结(必看篇)
2016/12/26 Javascript
jQuery动态产生select option下拉列表
2017/03/15 Javascript
JS模拟超市简易收银台小程序代码解析
2017/08/18 Javascript
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
bootstrap Table服务端处理分页(后台是.net)
2017/10/19 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
2018/01/24 Javascript
js canvas画布实现高斯模糊效果
2018/11/27 Javascript
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
[03:04]2018年度DOTA2玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
[01:03:50]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第二场 2月7日
2021/03/11 DOTA
快速了解Python中的装饰器
2018/01/11 Python
解决python爬虫中有中文的url问题
2018/05/11 Python
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
对python 自定义协议的方法详解
2019/02/13 Python
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
荷兰家电购物网站:Expert.nl
2020/01/18 全球购物
如果NULL定义成#define NULL((char *)0)难道不就可以向函数传入不加转换的NULL了吗
2012/02/15 面试题
什么是SQL Server的确定性函数和不确定性函数
2016/08/04 面试题
劳资员岗位职责
2013/11/11 职场文书
业务助理岗位职责
2013/11/18 职场文书
物流管理专业应届生求职信
2013/11/21 职场文书
房地产公司见习自我鉴定
2014/04/28 职场文书
文明美德伴我成长演讲稿
2014/05/12 职场文书
节能环保口号
2014/06/12 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
2015年后勤工作总结范文
2015/04/08 职场文书
幼儿园安全工作总结2015
2015/04/20 职场文书
2016年春节问候语
2015/11/11 职场文书