使用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 本页面传值实现代码
May 17 Javascript
javascript下利用arguments实现string.format函数
Aug 24 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
Sep 20 Javascript
myEvent.js javascript跨浏览器事件框架
Oct 24 Javascript
jQuery中clearQueue()方法用法实例
Dec 29 Javascript
JavaScript如何禁止Backspace键
Dec 02 Javascript
jquery+html仿翻页相册功能
Dec 20 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 Javascript
webpack源码之loader机制详解
Apr 06 Javascript
layer.open关闭父窗口 以及调用父页面的方法
Aug 17 Javascript
微信小程序Echarts图表组件使用方法详解
Jun 25 Javascript
vue如何限制只能输入正负数及小数
Jul 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自定session保存路径及删除、注销与写入的方法
2014/11/18 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
JavaScript 数组循环引起的思考
2010/01/01 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
2015/08/12 Javascript
JS获取屏幕高度的简单实现代码
2016/05/24 Javascript
Vue.JS入门教程之处理表单
2016/12/01 Javascript
解析预加载显示图片艺术
2016/12/05 Javascript
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
vue 监听屏幕高度的实例
2018/09/05 Javascript
JavaScript canvas动画实现时钟效果
2020/02/10 Javascript
JS实现瀑布流效果
2020/03/07 Javascript
vue实现简单全选和反选功能
2020/09/15 Javascript
[54:25]Ti4 循环赛第三日LGD vs MOUZ
2014/07/12 DOTA
Python函数学习笔记
2008/10/07 Python
利用python代码写的12306订票代码
2015/12/20 Python
python决策树之C4.5算法详解
2017/12/20 Python
python版大富翁源代码分享
2018/11/19 Python
Python 实用技巧之利用Shell通配符做字符串匹配
2019/08/23 Python
python脚本之一键移动自定格式文件方法实例
2019/09/02 Python
python getopt模块使用实例解析
2019/12/18 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
Java Unsafe类实现原理及测试代码
2020/09/15 Python
Python字典dict常用方法函数实例
2020/11/09 Python
EJB timer的种类
2014/10/28 面试题
办公室前台的岗位职责
2013/12/20 职场文书
婚纱店策划方案
2014/05/22 职场文书
个人四风问题整改措施
2014/10/24 职场文书
导游欢送词
2015/01/31 职场文书
2015年宣传工作总结
2015/04/08 职场文书
运动会广播稿300字
2015/08/19 职场文书
高三物理教学反思
2016/02/20 职场文书
Centos环境下Postgresql 安装配置及环境变量配置技巧
2021/05/18 PostgreSQL
用python实现监控视频人数统计
2021/05/21 Python
Java新手教程之ArrayList的基本使用
2021/06/20 Java/Android
Python查找算法的实现 (线性、二分,分块、插值查找算法)
2022/04/24 Python