使用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 相关文章推荐
解决3.01版的jquery.form.js中文乱码问题的解决方法
Mar 08 Javascript
简单的ajax连接库分享(不用jquery的ajax)
Jan 19 Javascript
Bootstrap 网站实例之单页营销网站
Oct 20 Javascript
JS使用正则实现去掉字符串左右空格的方法
Dec 27 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
Mar 22 Javascript
Angularjs验证用户输入的字符串是否为日期时间
Jun 01 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
Dec 05 Javascript
js获取form表单中name属性的值
Feb 27 Javascript
微信二次分享报错invalid signature问题及解决方法
Apr 01 Javascript
javascript原型链学习记录之继承实现方式分析
May 01 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
May 20 Javascript
vue中实现高德定位功能
Dec 03 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
JavaScript 事件系统
2010/07/22 Javascript
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
基于JS模仿windows文件按名称排序效果
2016/06/29 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
Vuex实现计数器以及列表展示效果
2018/03/10 Javascript
详解webpack自定义loader初探
2018/08/29 Javascript
简单介绍Python下自己编写web框架的一些要点
2015/04/29 Python
初步讲解Python中的元组概念
2015/05/21 Python
使用Python读写及压缩和解压缩文件的示例
2016/07/08 Python
python实现word 2007文档转换为pdf文件
2018/03/15 Python
解决pycharm运行出错,代码正确结果不显示的问题
2018/11/30 Python
Python网页正文转换语音文件的操作方法
2018/12/09 Python
Python 200行代码实现一个滑动验证码过程详解
2019/07/11 Python
Python assert关键字原理及实例解析
2019/12/13 Python
Django ModelForm操作及验证方式
2020/03/30 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
国贸专业个人求职信分享
2013/12/04 职场文书
自主招生自荐信
2013/12/08 职场文书
市场营销个人求职信范文
2014/02/02 职场文书
活动策划求职信模板
2014/04/21 职场文书
银行求职信
2014/05/31 职场文书
党干部专题民主生活会对照检查材料思想汇报
2014/10/06 职场文书
员工试用期转正自我评价
2015/03/10 职场文书
公司文体活动总结
2015/05/07 职场文书
2015初中政治教学工作总结
2015/07/21 职场文书
信息技术国培研修日志
2015/11/13 职场文书
学习党史心得体会2016
2016/01/23 职场文书
PyQt5实现多张图片显示并滚动
2021/06/11 Python
宝塔更新Python及Flask项目的部署
2022/04/11 Python