使用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 相关文章推荐
Sample script that deletes a SQL Server database
Jun 16 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
Dec 13 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
May 14 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
Mar 02 Javascript
jQuery获取URL请求参数的方法
Jul 18 Javascript
javascript中for/in循环及使用技巧
Sep 01 Javascript
Javascript动画效果(2)
Oct 11 Javascript
详解Node.js利用node-git-server快速搭建git服务器
Sep 27 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
详解angularjs实现echart图表效果最简洁教程
Nov 29 Javascript
JavaScript 隐性类型转换步骤浅析
Mar 15 Javascript
微信小程序动态添加view组件的实例代码
May 23 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
一条久听不愿放下的DIY森海MX500,三言两语话神奇
2021/03/02 无线电
Oracle Faq(Oracle的版本)
2006/10/09 PHP
php比较多维数组中值的大小排序实现代码
2012/09/08 PHP
WordPress的主题编写中获取头部模板和底部模板
2015/12/28 PHP
PHP实现将多个文件压缩成zip格式并下载到本地的方法示例
2018/05/23 PHP
Ajax+Jpgraph实现的动态折线图功能示例
2019/02/11 PHP
Laravel 解决composer相关操作提示php相关异常的问题
2019/10/23 PHP
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
2010/03/16 Javascript
javascript跨域刷新实现代码
2011/01/01 Javascript
AJAX 网页保留浏览器前进后退等功能
2011/02/12 Javascript
jQuery 数据缓存模块进化史详细介绍
2012/11/19 Javascript
根据json字符串生成Html的一种方式
2013/01/09 Javascript
原生js做的手风琴效果的导航菜单
2013/11/08 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
jQuery Validate 数组 全部验证问题
2017/01/12 Javascript
Javascript 链式作用域详细介绍
2017/02/23 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
[01:35:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第一场 1月18日
2021/03/11 DOTA
python网络爬虫学习笔记(1)
2018/04/09 Python
Python3爬虫学习之应对网站反爬虫机制的方法分析
2018/12/12 Python
Python可变和不可变、类的私有属性实例分析
2019/05/31 Python
Python Selenium参数配置方法解析
2020/01/19 Python
Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解
2020/02/10 Python
利用python实现逐步回归
2020/02/24 Python
Python3自定义http/https请求拦截mitmproxy脚本实例
2020/05/11 Python
详解python 内存优化
2020/08/17 Python
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
美国汽配连锁巨头Pep Boys官网:轮胎更换、汽车维修服务和汽车零部件
2017/01/14 全球购物
护理实习自我鉴定
2013/12/14 职场文书
个人社会实践自我鉴定
2014/03/24 职场文书
村长贪污检举信
2014/04/04 职场文书
2015毕业生实习期工作总结
2015/04/09 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
Unity连接MySQL并读取表格数据的实现代码
2021/06/20 MySQL
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android