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

Vue uses Echarts to implement a three-dimensional bar chart

This article shares the specific code of Vue usin...

HTML uses the title attribute to display text when the mouse hovers

Copy code The code is as follows: <a href=# ti...

Linux Check the installation location of the software simple method

1. Check the software installation path: There is...

Use pure CSS to achieve scroll shadow effect

To get straight to the point, there is a very com...

The use of vue directive v-bind and points to note

Table of contents 1. v-bind: can bind some data t...

Summary of twelve methods of Vue value transfer

Table of contents 1. From father to son 2. Son to...

Vue uses canvas handwriting input to recognize Chinese

Effect picture: Preface: Recently, I was working ...

Perform data statistics on different values ​​of the same field in SQL

Application scenario: It is necessary to count th...

Implementation of WeChat applet message push in Nodejs

Select or create a subscription message template ...

Details of the order in which MySQL reads my.cnf

Table of contents The order in which MySQL reads ...