JS如何实现获取扫码枪条形码的功能
Admin 2022-09-27 群英技术资讯 1593 次浏览
这篇文章主要介绍“JS如何实现获取扫码枪条形码的功能”的相关知识,下面会通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JS如何实现获取扫码枪条形码的功能”文章能帮助大家解决问题。下面通过实例代码给大家介绍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案件的按下事件,判断捕获的扫码枪输入数值是否为空,不为空,对相应的文本框赋值,同时触发按找条形码查找商品的方法
总结
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
react在linux上部署的方法:1、打开配置文件;2、通过“tar -zcvf client.tar.gz client”命令将client和server打包;3、将“client.tar.gz”,“server.tar.gz”,“theme.js”及“package.json”文件拷贝至服务器上的项目文件夹下;4、开启服务即可。
这篇文章我们来了解TypeScript的函数重载功能的相关内容,主要介绍TypeScript中函数重载写法,下文有很详细的介绍,对大家学习或工作会有帮助,接下来就跟随小编来一起学习一下吧!
目录正文这里有两个方法方法一:这个比较集中方法二:cookie存取各封装成函数正文在京东上浏览的时候,发现了一个比较人性化的小功能,浏览商品,浏览到一半的时候,如下图所示:我重新加载网页,刷新之后,滚动条依然定位在我刚刚浏览的位置,这个小功能感觉还不错,挺方便的。具体是怎么实现的呢,去网上大概查了一下。这个是使用滚动条
这篇文章主要为大家详细介绍了小程序实现tab更换页面效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
HTML+JS实现监控切屏功能,下文有实例供大家参考,对大家了解操作过程或相关知识有一定的帮助,而且实用性强,希望这篇文章能帮助大家,下面我们一起来了解看看吧。
成为群英会员,开启智能安全云计算之旅
立即注册关注或联系群英网络
7x24小时售前:400-678-4567
7x24小时售后:0668-2555666
24小时QQ客服
群英微信公众号
CNNIC域名投诉举报处理平台
服务电话:010-58813000
服务邮箱:service@cnnic.cn
投诉与建议:0668-2555555
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 ICP核准(ICP备案)粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008