How to get USB scanner data using js

How to get USB scanner data using js

This article shares the specific process of js obtaining USB barcode scanner data for your reference. The specific content is as follows

Without further ado, let's go straight to the code. This method avoids problems such as missing first letters, garbled strings, etc. It is very useful. Let's record it.

The Ajax in the middle can directly call the login function to achieve automatic login

Note: The input box needs to get the focus, which is necessary. Secondly, in order to prevent the carriage return from triggering manual login, you need to add the operation of onkeypress="if(event.keyCode==13) return false;". When the carriage return is pressed, the input box focus will not be lost unless the focus is manually switched or the focus() method is called.

<div class="form-group">
 <label for="inputUsernameEmail">Account</label>
 <input type="text" placeholder="Please enter your account" name="username" id="loginname" class="form-control" autofocus onkeypress="if(event.keyCode==13) return false;">
</div>

Code:

<script>
  window.onload = (e) => {
   this.start = new Date().getTime()
   let code = ''
   let lastTime, nextTime
   let lastCode, nextCode
   let that = this
   window.document.onkeypress = function (e) {
    if (window.event) { // IE
     nextCode = e.keyCode
    } else if (e.which) { // Netscape/Firefox/Opera
     nextCode = e.which
    }
    console.log('nextCode', nextCode)
    if (e.which === 13 || window.event === 13) {
     var deviceCode = code;
     console.log(code)
     console.log('Scan code completed')
     console.timeEnd()
     code = ''
     lastCode = ''
     lastTime = ''
     $.ajax({
      cache: true,
      type: "POST",
      url: rootPath + "/admin/login",
      data: {code: deviceCode, type: 1},
      async: false,
      error: function (request) {
       $("#loginname").val("");
       $.modal.alertError("System error");
      },
      success: function (data) {
       $("#loginname").val("");
       if (data.code == 200) {
        location.href = rootPath + '/admin/index';
       } else {
        $.modal.alertError(data.msg);
       }
      }
     });
    }
    nextTime = new Date().getTime()
    if (!lastTime && !lastCode) {
     console.log('Scan the code to start...')
     code += e.key
    }
    if (lastCode && lastTime && nextTime - lastTime > 500) { // When there is a keypress event before scanning the code, prevent the first word from being missing console.log('Prevent the first word from being missing...')
     code = e.key
    } else if (lastCode && lastTime) {
     console.log('Scanning the code...')
     code += e.key
    }
    lastCode = nextCode
    lastTime = nextTime
   }
  }
</script>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • Detailed code explanation of the idea of ​​using JavaScript to obtain the barcode scanned by the scanner
  • js method to obtain the input data of the barcode scanner
  • JS realizes the function of scanning QR code with barcode scanner

<<:  Tomcat exception solution (Invalid character found in the request target. The valid characters are defined in RFC 7230 and RFC 3986)

>>:  Troubleshooting MySQL high CPU load issues

Recommend

How to compile and install opencv under ubuntu

Easy installation of opencv2: conda install --cha...

Keepalived+Nginx+Tomcat sample code to implement high-availability Web cluster

Keepalived+Nginx+Tomcat to achieve high availabil...

MySQL 8.0.13 decompression version installation graphic tutorial under Windows

This article shares with you the MySQL 8.0.13 ins...

How to use vue-cli to create a project and package it with webpack

1. Prepare the environment (download nodejs and s...

vue-cropper component realizes image cutting and uploading

This article shares the specific code of the vue-...

Vue realizes the palace grid rotation lottery

Vue implements the palace grid rotation lottery (...

Example of how to build a Mysql cluster with docker

Docker basic instructions: Update Packages yum -y...

Implementing a simple student information management system based on VUE

Table of contents 1. Main functions 2. Implementa...

Detailed tutorial on installing Docker and nvidia-docker on Ubuntu 16.04

Table of contents Docker Installation Nvidia-dock...

CSS tips for controlling animation playback and pause (very practical)

Today I will introduce a very simple trick to con...

Nginx implements dynamic and static separation example explanation

In order to speed up the parsing of the website, ...

Steps to purchase a cloud server and install the Pagoda Panel on Alibaba Cloud

Alibaba Cloud purchases servers Purchase a cloud ...

CSS -webkit-box-orient: vertical property lost after compilation

1. Cause The requirement is to display two lines,...