使用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 相关文章推荐
来自qq的javascript面试题
Jul 24 Javascript
js工具方法弹出蒙版
May 08 Javascript
js中switch case循环实例代码
Dec 30 Javascript
jQuery实现模拟marquee标签效果
Jul 14 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
Dec 17 Javascript
jQuery获取当前点击的对象元素(实现代码)
May 19 Javascript
Jquery表单验证失败后不提交的解决方法
Oct 18 Javascript
基于jquery的on和click的区别详解
Jan 15 jQuery
关于vue-router的那些事儿
May 23 Javascript
vue项目刷新当前页面的三种方法
Dec 04 Javascript
微信小程序如何再次获取用户授权的方法
May 10 Javascript
JavaScript实现Excel表格效果
Feb 07 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加速的eAccelerator dll支持文件打包下载
2007/09/30 PHP
PHP中session变量的销毁
2014/02/27 PHP
Thinkphp的volist标签嵌套循环使用教程
2014/07/08 PHP
Ajax实现对静态页面的文章访问统计功能示例
2016/10/10 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
jQuery 前的按键判断代码
2010/03/19 Javascript
jquery应该如何来设置改变按钮input的onclick事件
2012/12/10 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
express的中间件basicAuth详解
2014/12/04 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
Javascript中innerHTML用法实例分析
2015/01/12 Javascript
jquery显示loading图片直到网页加载完成的方法
2015/06/25 Javascript
JavaScript跨域调用基于JSON的RESTful API
2016/07/09 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
2017/02/27 Javascript
JS设置手机验证码60s等待实现代码
2017/06/14 Javascript
vue中引用阿里字体图标的方法
2018/02/10 Javascript
angular json对象push到数组中的方法
2018/02/27 Javascript
vue-swiper的使用教程
2018/08/30 Javascript
js控制随机数生成概率代码实例
2019/03/21 Javascript
Angular6使用forRoot() 注册单一实例服务问题
2019/08/27 Javascript
python实现百度关键词排名查询
2014/03/30 Python
Python爬取网页中的图片(搜狗图片)详解
2017/03/23 Python
Python面向对象之反射/自省机制实例分析
2018/08/24 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
python实现可变变量名方法详解
2019/07/01 Python
详解python中的异常和文件读写
2021/01/03 Python
CSS3 仿微信聊天小气泡实例代码
2017/04/05 HTML / CSS
C#公司笔试题
2014/03/28 面试题
销售文员的岗位职责
2013/11/20 职场文书
全神贯注教学反思
2014/02/03 职场文书
人事部专员岗位职责
2014/03/04 职场文书
《北大荒的秋天》教学反思
2014/04/14 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
面试自我评价范文
2014/09/17 职场文书
违纪检讨书
2015/01/27 职场文书
商业计划书如何写?关键问题有哪些?
2019/07/11 职场文书