html页面获取扫码枪参数,js获取扫码枪输入数据的方法_老笨Siva的博客-程序员秘密

技术标签： html页面获取扫码枪参数

详情介绍

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

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

let lastTime, nextTime;

let lastCode, nextCode;

window.document.onkeypress = (e) => {

if (window.event) { // IE

nextCode = e.keyCode;

} else if (e.which) { // Netscape/Firefox/Opera

nextCode = e.which;

}

if (nextCode === 13) {

if (code.length

console.log(code); // 获取到扫码枪输入的内容，做别的操作

code = '';

lastCode = '';

lastTime = '';

return;

}

nextTime = new Date().getTime();

if (!lastTime && !lastCode) {

code += e.key;

}

if (lastCode && lastTime && nextTime - lastTime > 30) { // 当扫码前有keypress事件时,防止首字缺失

code = e.key;

} else if (lastCode && lastTime) {

code += e.key;

}

lastCode = nextCode;

lastTime = nextTime;

}

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

原理：

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

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

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

需要引入jQuery，我这里用的是vuewindow.onload = (e)=> {

document.onkeydown = (e)=> {

let nextCode,nextTime = '';

let lastTime = this.lastTime;

let code = this.code;

if (window.event) {// IE

nextCode = e.keyCode

} else if (e.which) {// Netscape/Firefox/Opera

nextCode = e.which

}

nextTime = new Date().getTime();

//字母上方数字键0-9 对应键码值 48-57; 数字键盘数字键0-9 对应键码值 96-105

if((nextCode>=48&&nextCode<=57) || (nextCode>=96&&nextCode<=105)){

let 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(nextTime && lastTime && nextTime-lastTime>2000){

code = String.fromCharCode(nextCode);

}else{

code += String.fromCharCode(nextCode)

}

// 保存数据

this.nextCode = nextCode;

this.lastTime = nextTime;

this.code = code;

// 键入Enter

if(e.which == 13) {

// 判断 code 长度(这里就获取到条码值了，以下业务自由发挥)

code = $.trim(code)

if (code.length == 13) {

this.$message('A类条码:' + code);

} else if (code.length == 23) {

this.$message('B类条码:' + code);

} else if (code.length == 0) {

this.$message('请输入条码');

} else{

this.$message('条码不合法：' + code);

}

//键入回车务必清空code值

this.code = ''

return false;

}

本文链接：https://blog.csdn.net/weixin_30423863/article/details/117801819

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

AMS源码分析_ams 源码_小山研磨代码的博客-程序员秘密

转载来源：AMS源码分析(一)Activity生命周期管理AMS源码分析(二)onActivityResult执行过程AMS源码分析(三)AMS中Activity栈管理详解(一)Activity生命周期管理1. 前言AMS(ActivityManagerService)是Activity管理的核心组件，提供了Activity的启动、生命周期管理、栈管理等功能，熟悉AMS会对我们认识Activity的工作原理有很大的帮助。当前比较成熟的插件化技术，也是通过对Activity启动流程中的重要组件

毕设课设基于Android的校园订餐APP开发（附源码）_安卓订餐系统源码_泛古玉的博客-程序员秘密

系统由商家侧 APP 和用户（学生）侧 APP 两大模块组成，商家 APP 面向食堂的各个商户，商户能够使用其进行菜品的上下架，同时远程接受订单与得到用户评价反馈；用户（学生）侧 APP 面向各位在食堂就餐的学生，学生可以使用其进行菜品预览、在线下单，能够看到餐品的全部评价，同时也能在消费后对菜品进行评价。............

AM-Softmax Loss_amsoftmax github_Peanut_范的博客-程序员秘密

《Additive Margin Softmax for Face Verification》2018，Feng Wang et al.引言：本文提出一个概念上简单且几何上可解释的目标函数：additive margin Softmax (AM-Softmax)，用于深度人脸验证，使得人脸特征具有更大的类间距和更小的类内距。同时，本文强调和讨论了特征归一化的重要性。实验表明AM-Soft...

实现简单动态自动匹配输入的内容_动态输入匹配怎么做_AC_XXZ的博客-程序员秘密

用这两个控件分别实现这两个：package com.example.autocomplete;import android.app.Activity;import android.os.Bundle;import android.util.Log;import andr

Makefile.am文件详解_u012903992的博客-程序员秘密

原文：https://blog.csdn.net/u013485792/article/details/51355668Makefile.am是一种比Makefile更高层次的编译规则，可以和configure.in文件一起通过调用automake命令，生成Makefile.in文件，再调用./configure的时候，就将Makefile.in文件自动生成Makefile文件了。所以Makefile.am文件是比Makefile文件更高的抽象。下面我根据自己的工作中的一些应用，来讨论Makefil

C# 实现软件授权码的功能_private system.windows.forms.textbox textbox2_任玉腾的博客-程序员秘密

对于一个商业软件来说，授权码这个功能必不可少。我这里采用CPU序列号加硬盘标识来判断是否授权。完整代码如下：using Microsoft.Win32;using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using System.Drawing;us...