使用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 鼠标拖动对象 可让任何div实现拖动效果
Nov 09 Javascript
Javascript实现Web颜色值转换
Feb 05 Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
Apr 06 Javascript
老生常谈Javascript中的原型和this指针
Oct 09 Javascript
微信小程序 火车票查询实例讲解
Oct 17 Javascript
JS操作xml对象转换为Json对象示例
Mar 25 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
May 07 Javascript
AngularJS常见过滤器用法实例总结
Jul 06 Javascript
基于vue、react实现倒计时效果
Aug 26 Javascript
微信小程序实现下滑到底部自动翻页功能
Mar 07 Javascript
微信小程序实现点击导航条切换页面
Nov 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
测试PHP连接MYSQL成功与否的代码
2013/08/16 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
php无限级分类实现方法分析
2016/10/19 PHP
thinkPHP中配置的读取与C方法详解
2016/12/05 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
用js实现的仿sohu博客更换页面风格(简单版)
2007/03/22 Javascript
用js实现控制内容的向上向下滚动效果
2007/06/26 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
阻止表单提交按钮多次提交的完美解决方法
2016/05/16 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
2017/04/04 jQuery
JS字符串按逗号和回车分隔的方法
2017/04/25 Javascript
JavaScript实现简单动态进度条效果
2018/04/06 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
2020/10/26 Javascript
[03:46]显微镜下的DOTA2第七期——满血与残血
2014/06/20 DOTA
[53:29]完美世界DOTA2联赛循环赛 DM vs Matador BO2第二场 11.04
2020/11/05 DOTA
python中使用smtplib和email模块发送邮件实例
2014/04/22 Python
python用match()函数爬数据方法详解
2019/07/23 Python
详解Python3定时器任务代码
2019/09/23 Python
Django自带的加密算法及加密模块详解
2019/12/03 Python
tensorflow tf.train.batch之数据批量读取方式
2020/01/20 Python
python能开发游戏吗
2020/06/11 Python
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
UGG雪地靴德国官网:UGG德国
2016/11/19 全球购物
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
材料加工硕士生求职信
2013/10/10 职场文书
校园报刊亭的创业计划书
2014/01/02 职场文书
依法行政工作汇报
2014/10/28 职场文书
机关单位工作失职检讨书
2014/11/20 职场文书
先进班组事迹材料
2014/12/25 职场文书
2014年个人年终总结
2015/03/09 职场文书
2016国庆节67周年寄语
2015/12/07 职场文书
幼儿园2016年圣诞活动总结
2016/03/31 职场文书
解析目标检测之IoU
2021/06/26 Python