使用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 相关文章推荐
JavaScript类和继承 this属性使用说明
Sep 03 Javascript
js导航栏单击事件背景变换示例代码
Jan 13 Javascript
javascript对中文按照拼音排序代码
Aug 20 Javascript
ie8下修改input的type属性报错的解决方法
Sep 16 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
Dec 31 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 Javascript
Bootstrap表单布局样式代码
May 31 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
Jan 11 Javascript
浅谈$_FILES数组为空的原因
Feb 16 Javascript
React 组件渲染和更新的实现代码示例
Feb 21 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 Javascript
Angular请求防抖处理第一次请求失效问题
May 17 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
相对路径转化成绝对路径
2007/04/10 PHP
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
深入解析phpCB批量转换的代码示例
2013/06/27 PHP
将CMYK颜色值和RGB颜色相互转换的PHP代码
2014/07/28 PHP
php车辆违章查询数据示例
2016/10/14 PHP
JavaScript中的Screen屏幕对象
2008/01/16 Javascript
几个javascript操作word的参考代码
2009/10/26 Javascript
一些主流JS框架中DOMReady事件的实现小结
2011/02/12 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
2013/04/07 Javascript
浅谈JavaScript正则表达式分组匹配
2015/04/10 Javascript
javascript常用功能汇总
2015/07/05 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
JavaScript之WebSocket技术详解
2016/11/18 Javascript
jQuery无缝轮播图代码
2016/12/22 Javascript
Vue 过渡实现轮播图效果
2017/03/27 Javascript
vue 实现类似淘宝星级评分的示例
2018/03/01 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
vue路由组件按需加载的几种方法小结
2018/07/12 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
2021/01/26 Vue.js
centos下更新Python版本的步骤
2013/02/12 Python
跟老齐学Python之深入变量和引用对象
2014/09/24 Python
利用 Monkey 命令操作屏幕快速滑动
2016/12/07 Python
Python元字符的用法实例解析
2018/01/17 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
零基础使用Python读写处理Excel表格的方法
2019/05/02 Python
解决使用export_graphviz可视化树报错的问题
2019/08/09 Python
手把手教你安装Windows版本的Tensorflow
2020/03/26 Python
Python自带的IDE在哪里
2020/07/01 Python
标准毕业生自荐信范文
2013/11/04 职场文书
村优秀党员事迹材料
2014/01/15 职场文书
cf战队收人广告词
2014/03/14 职场文书
《第一次抱母亲》教学反思
2014/04/16 职场文书
祖国在我心中演讲稿(小学生)
2014/09/23 职场文书
企业百日安全活动总结
2015/05/07 职场文书
企业年会祝酒词
2015/08/11 职场文书
Go语言特点及基本数据类型使用详解
2022/03/21 Golang