使用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 简短几句代码实现给元素动态添加及获取提示信息
Sep 01 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
Jun 20 Javascript
js控制浏览器全屏示例代码
Feb 20 Javascript
js实现简单的购物车有图有代码
May 26 Javascript
AngularJS初始化过程分析(引导程序)
Dec 06 Javascript
基于BootstrapValidator的Form表单验证(24)
Dec 12 Javascript
基于Javascript实现的不重复ID的生成器
Dec 25 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
Dec 30 Javascript
浅谈angular2 组件的生命周期钩子
Aug 12 Javascript
js canvas实现红包照片效果
Aug 21 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
Jun 04 Javascript
vue axios post发送复杂对象问题
Jun 04 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+mysql实现用户注册登陆的方法
2015/01/03 PHP
PHP实现简单的新闻发布系统实例
2015/07/28 PHP
阿里云PHP SMS短信服务验证码发送方法
2017/07/11 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
PHP实现的基于单向链表解决约瑟夫环问题示例
2017/09/30 PHP
PHP filesize函数用法浅析
2019/02/15 PHP
JavaScript的Cookies
2008/01/16 Javascript
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
2015/10/14 Javascript
javascript中的altKey 和 Event属性大全
2015/11/06 Javascript
javascript从定义到执行 你不知道的那些事
2016/01/04 Javascript
基于jQuery倒计时插件实现团购秒杀效果
2016/05/13 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
2017/02/13 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
2017/09/14 Javascript
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
微信小程序使用二次贝塞尔曲线画波浪
2018/12/25 Javascript
浅谈vue加载优化策略
2019/03/19 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
小程序实现图片预览裁剪插件
2019/11/22 Javascript
JavaScript中EventBus实现对象之间通信
2020/10/18 Javascript
[02:05]2014DOTA2西雅图邀请赛 专访啸天mik夫妻档
2014/07/08 DOTA
Python中return self的用法详解
2018/07/27 Python
python使用python-pptx删除ppt某页实例
2020/02/14 Python
pandas 像SQL一样使用WHERE IN查询条件说明
2020/06/05 Python
五款漂亮的纯CSS3动画按钮的实例教程
2014/11/21 HTML / CSS
美国演唱会订票网站:Ticketmaster美国
2017/10/05 全球购物
毕业生自荐书
2014/02/02 职场文书
民族团结先进个人材料
2014/02/05 职场文书
小学校本培训方案
2014/06/06 职场文书
2014卖家双十一活动策划书
2014/09/29 职场文书
房产公证书格式
2015/01/26 职场文书
python正则表达式re.search()的基本使用教程
2021/05/21 Python