使用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获取元素文档大小、偏移和位置和滚动条位置的方法集合
Jan 12 Javascript
纯JavaScript实现的完美渐变弹出层效果代码
Apr 02 Javascript
Jquery如何实现点击时高亮显示代码
Jan 22 Javascript
js使用DOM操作实现简单留言板的方法
Apr 10 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
Mar 07 Javascript
第一次接触神奇的Bootstrap表单
Jul 27 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
Apr 29 Javascript
详解小程序云开发数据库
May 20 Javascript
使用vue实现一个电子签名组件的示例代码
Jan 06 Javascript
JavaScript常用工具函数大全
May 06 Javascript
vue项目在webpack2实现移动端字体自适配功能
Jun 02 Javascript
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
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函数
2011/05/31 PHP
php存储过程调用实例代码
2013/02/03 PHP
centos 7.2下搭建LNMP环境教程
2016/11/20 PHP
详解PHP 二维数组排序保持键名不变
2019/03/06 PHP
javascript jQuery插件练习
2008/12/24 Javascript
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
CheckBoxList多选样式jquery、C#获取选择项
2013/09/06 Javascript
PHP开发者必须掌握的6个关键字
2014/04/14 Javascript
jquery实现图片按比例缩放示例
2014/07/01 Javascript
第十章之巨幕页头缩略图与警告框组件
2016/04/25 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
vue.js系列中的vue-fontawesome使用
2018/02/10 Javascript
Vue2 监听属性改变watch的实例代码
2018/08/27 Javascript
json前后端数据交互相关代码
2018/09/19 Javascript
Emberjs 通过 axios 下载文件的方法
2019/09/03 Javascript
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
浅谈Python的垃圾回收机制
2016/12/17 Python
python实现点对点聊天程序
2018/07/28 Python
对python中的try、except、finally 执行顺序详解
2019/02/18 Python
用vue.js组件模拟v-model指令实例方法
2019/07/05 Python
python找出因数与质因数的方法
2019/07/25 Python
Python命令行click参数用法解析
2019/12/19 Python
Python3 虚拟开发环境搭建过程(图文详解)
2020/01/06 Python
Python包和模块的分发详细介绍
2020/06/19 Python
用 Django 开发一个 Python Web API的方法步骤
2020/12/03 Python
css3弹性盒子flex实现三栏布局的实现
2020/11/12 HTML / CSS
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
大学生入党思想汇报
2014/01/14 职场文书
幼儿园中班新学期寄语
2014/01/18 职场文书
学生周末回家住宿长期请假条
2014/02/15 职场文书
演讲稿格式
2014/04/30 职场文书
教室布置标语
2014/06/26 职场文书
廉政教育的心得体会
2014/09/01 职场文书
暑假安全教育广播稿
2014/09/10 职场文书
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL