使用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 相关文章推荐
HTML5之lang属性与dir属性的详解
Jun 19 Javascript
js验证输入是否为手机号码或电话号码示例
Dec 30 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
Mar 05 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
Sep 21 Javascript
Angularjs 基础入门
Dec 26 Javascript
js实现精美的图片跟随鼠标效果实例
May 16 Javascript
详解react-router如何实现按需加载
Jun 15 Javascript
two.js之实现动画效果示例
Nov 06 Javascript
three.js中文文档学习之如何本地运行详解
Nov 20 Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 Javascript
微信小程序发送短信验证码完整实例
Jan 07 Javascript
layui实现二维码弹窗、并下载到本地的方法
Sep 25 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的memcached客户端memcached
2011/06/14 PHP
php读取mysql乱码,用set names XXX解决的原理分享
2011/12/29 PHP
仿dedecms下拉分页样式修改的thinkphp分页类实例
2014/10/30 PHP
php使用ftp远程上传文件类(完美解决主从文件同步问题的方法)
2016/09/23 PHP
老生常谈PHP 文件写入和读取(必看篇)
2017/05/22 PHP
JavaScript触发器详解
2007/03/10 Javascript
初学js插入节点appendChild insertBefore使用方法
2011/07/04 Javascript
在JavaScript并非所有的一切都是对象
2013/04/11 Javascript
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
2017/06/04 Javascript
JavaScript禁用右键单击优缺点分析
2019/01/20 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
2019/04/17 Javascript
vue使用自定义指令实现拖拽
2021/01/29 Javascript
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
JS实现拖动模糊框特效
2020/08/25 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
2020/10/29 Javascript
vue实现登录功能
2020/12/31 Vue.js
[01:19:11]Ti4 循环赛第二日 NaVi.us vs iG
2014/07/11 DOTA
Python实现批量读取word中表格信息的方法
2015/07/30 Python
使用Python对SQLite数据库操作
2017/04/06 Python
Python构建XML树结构的方法示例
2017/06/30 Python
PyQt5每天必学之像素图控件QPixmap
2018/04/19 Python
Python中shapefile转换geojson的示例
2019/01/03 Python
Python中注释(多行注释和单行注释)的用法实例
2019/08/28 Python
django从后台返回html代码的实例
2020/03/11 Python
降低python版本的操作方法
2020/09/11 Python
一款基于css3麻将筛子3D翻转特效的实例教程
2014/12/31 HTML / CSS
小学一年级评语大全
2014/04/22 职场文书
入党群众意见范文
2015/06/02 职场文书
2016党校培训心得体会
2016/01/07 职场文书
导游词之苏州阳澄湖
2019/11/15 职场文书
Python基础之条件语句详解
2021/06/16 Python
Go语言读取txt文档的操作方法
2022/01/22 Golang
Django + Taro 前后端分离项目实现企业微信登录功能
2022/04/07 Python