搜索本站精品资源

本站所有资源均为高质量资源,各种姿势下载。

js获取扫码枪输入数据的方法

作者 : 3214567959 文章热度:1.82K

目 录

详情介绍

扫码枪相当于键盘输入设备,输入一连串数字后加一个enter键。

但在实际开发中需要区分是扫描枪输入还是键盘用户输入,区别在于扫码枪输入很快。

  1. let code = ;
  2.   let lastTime, nextTime;
  3.   let lastCode, nextCode;
  4.   window.document.onkeypress = (e) => {
  5.    if (window.event) { // IE
  6.     nextCode = e.keyCode;
  7.    } else if (e.which) { // Netscape/Firefox/Opera
  8.     nextCode = e.which;
  9.    }
  10.    if (nextCode === 13) {
  11.     if (code.length < 3) return; // 手动输入的时间不会让code的长度大于2,所以这里只会对扫码枪有
  12.     console.log(code); // 获取到扫码枪输入的内容,做别的操作
  13.     code = ;
  14.     lastCode = ;
  15.     lastTime = ;
  16.     return;
  17.    }
  18.    nextTime = new Date().getTime();
  19.    if (!lastTime && !lastCode) {
  20.     code += e.key;
  21.    } 
  22.    if (lastCode && lastTime && nextTime  lastTime > 30) { // 当扫码前有keypress事件时,防止首字缺失
  23.     code = e.key;
  24.    } else if (lastCode && lastTime) {
  25.     code += e.key;
  26.    }
  27.    lastCode = nextCode;
  28.    lastTime = nextTime;
  29.   }

下面看下js获取USB扫码枪数据的代码:

原理:

扫码枪扫描到的条形码每一位会触发一次onkeydown事件

比如扫描条码位‘1234567890’的条形码,会连续执行10次onkeydown事件

条码扫描到最后一位,会直接触发Enter

需要引入jQuery,我这里用的是vue

  1. window.onload = (e)=> {
  2.   document.onkeydown = (e)=> {
  3.     let nextCode,nextTime = ;
  4.     let lastTime = this.lastTime;
  5.     let code = this.code;
  6.     if (window.event) {// IE
  7.       nextCode = e.keyCode
  8.     } else if (e.which) {// Netscape/Firefox/Opera
  9.       nextCode = e.which
  10.     }
  11.     nextTime = new Date().getTime();
  12.     //字母上方 数字键0-9 对应键码值 48-57; 数字键盘 数字键0-9 对应键码值 96-105
  13.     if((nextCode>=48&&nextCode<=57) || (nextCode>=96&&nextCode<=105)){
  14.         let codes = {’48’:48,’49’:49,’50’:50,’51’:51,’52’:52,’53’:53,’54’:54,’55’:55,’56’:56,’57’:57,
  15.              ’96’:48,’97’:49,’98’:50,’99’:51,‘100’:52,‘101’:53,‘102’:54,‘103’:55,‘104’:56,‘105’:57
  16.             };
  17.             nextCode = codes[nextCode];
  18.             nextTime = new Date().getTime();
  19.     }
  20.     // 第二次输入延迟两秒,删除之前的数据重新计算
  21.     if(nextTime && lastTime && nextTimelastTime>2000){
  22.             code = String.fromCharCode(nextCode);
  23.     }else{
  24.         code += String.fromCharCode(nextCode)
  25.     }
  26.     // 保存数据
  27.     this.nextCode = nextCode;
  28.     this.lastTime = nextTime;
  29.     this.code = code;
  30.     // 键入Enter
  31.     if(e.which == 13) {
  32.       // 判断 code 长度(这里就获取到条码值了,以下业务自由发挥)
  33.         code = $.trim(code)
  34.       if (code.length == 13) {
  35.         this.$message(‘A类条码:’ + code);
  36.       } else if (code.length == 23) {
  37.                 this.$message(‘B类条码:’ + code);
  38.       } else if (code.length == 0) {
  39.                 this.$message(‘请输入条码’);
  40.       } else{
  41.         this.$message(‘条码不合法:’ + code);
  42.       }
  43.       //键入回车务必清空code值
  44.         this.code = 
  45.         return false;
  46.     }
  47.   }
  48. }
1. 本站所有资源来源于用户上传和网络搜集,版权归原作者所有,如需商业用途或转载请与作者联系,因此不包含技术服务请大家谅解!
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5.如有侵权请联系客服邮件3214567959@qq.com,我们会及时删除
A7站 » js获取扫码枪输入数据的方法

发表评论

2050+

本站勉强运行

363+

用户总数

203+

资源总数

0+

今日更新

2024-7-1

最后更新时间

zh_CNChinese