使用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 相关文章推荐
JS控制表格隔行变色
Jun 26 Javascript
web 页面分页打印的实现
Jun 22 Javascript
javascript中parseInt()函数的定义和用法分析
Dec 20 Javascript
JavaScript设计模式之建造者模式介绍
Dec 28 Javascript
jQuery检测输入的字符串包含的中英文的数量
Apr 17 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
Aug 31 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
Dec 05 Javascript
使用JSON作为函数的参数的优缺点
Oct 27 Javascript
Angularjs的启动过程分析
Jul 18 Javascript
Vue源码学习之初始化模块init.js解析
Nov 02 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
Nov 30 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 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
星际争霸秘籍
2020/03/04 星际争霸
php生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
php中随机显示图片的函数代码
2011/06/23 PHP
简单的php写入数据库类代码分享
2011/07/26 PHP
Laravel框架实现抢红包功能示例
2019/10/31 PHP
用javascript获取textarea中的光标位置
2008/05/06 Javascript
jQuery学习笔记 更改jQuery对象
2012/09/19 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
垃圾回收器的相关知识点总结
2018/05/13 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
2018/10/10 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
2020/11/11 Javascript
Python 序列化 pickle/cPickle模块使用介绍
2014/11/30 Python
python图像常规操作
2017/11/11 Python
python中scikit-learn机器代码实例
2018/08/05 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
python3安装crypto出错及解决方法
2019/07/30 Python
Python 词典(Dict) 加载与保存示例
2019/12/06 Python
Python变量、数据类型、数据类型转换相关函数用法实例详解
2020/01/09 Python
使用 Python ssh 远程登陆服务器的最佳方案
2020/03/06 Python
Python控制鼠标键盘代码实例
2020/12/08 Python
python爬虫如何解决图片验证码
2021/02/14 Python
python实现学生信息管理系统源码
2021/02/22 Python
详解使用canvas保存网页为pdf文件支持跨域
2018/11/23 HTML / CSS
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
英国最大的在线照明商店:Litecraft
2020/08/31 全球购物
公司行政经理岗位职责
2013/12/24 职场文书
民生工作实施方案
2014/05/31 职场文书
教师师德考核自我评价
2014/09/13 职场文书
2014年加油站站长工作总结
2014/12/23 职场文书
幼儿园工作总结2015
2015/04/01 职场文书
2015年“世界无车日”活动方案
2015/05/06 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
趣味运动会标语口号
2015/12/26 职场文书
Python实现科学占卜 让视频自动打码
2022/04/09 Python
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
2022/09/23 HTML / CSS