Implementation method of using jQuery to monitor code scanning gun input and prohibit manual input of recommendation

Scanning gun monitoring based on jQuery. If you just want to monitor and obtain barcode scanning information, you can use it directly. If there are more barcode judgment processing logic, you need to expand it yourself.

1. Functional requirements

Scan the barcode with the code scanning gun, monitor and obtain the data of the code scanning gun on one web page, and prohibit the user from manually inputting.

The initial idea is very simple, because the code scanning gun simulates the input of keyboard. When he plugs into the computer with usb interface, it becomes an external input device, and it can be monitored with js. However, how to judge whether the user is manually inputting requires some processing.

2. Main issues

1. How to determine whether to enter manually

2. How to judge that a barcode input is completed

3. Solutions

The solution to manual input is to compare the time interval between pressing and lifting a key and the time interval between pressing and pressing two keys.

Because the input speed of the code scanning gun is very fast, the input interval of the code scanning gun I tested is about 15-60 milliseconds, and then the manual input is between 100-200, unless I deliberately want to break through the limit and input quickly. This interval value can be controlled very small, provided that it is not faster than the speed of scanning code.

Judgment of input completion: You can monitor the change of input box, and if it reaches the number of digits we want, it will be submitted to the server for processing; The second one is based on the code scanning gun, because the code scanning gun I use can be configured to scan the code successfully and finally attach a carriage return. Therefore, according to the keycode of carriage return, it can be judged that the input has ended, and then the value of the input box is obtained, and then the subsequent processing (submission server, etc.) is carried out.

4. Code

The judgment of time interval depends on three events of jQuery: keydown, keypress and keyup; That is, the key starts to press, has been pressed, and pops up. keydown means that the key has just been pressed, but the key value has not been written into the text box, keypress has been pressed and the value has been entered into the text box, and keyup pops up.

What needs to be judged is the time interval between pressing and lifting the key, and the time interval between keydown and keydown.

The main manual input judgment code.

var barcode = {
  listenerObj: null,
  oneKeyTime : '', /* 1 Time interval of second key  */
  twoKeyTime : '', /*  Time interval between two keystrokes  */
  keyDownTime: '', /*  The time when the key is pressed   */
  barcodeLen : 8 , /*  Bar code length    */
  spanTime  : 70, /* 1 The time interval between pressing the second key and releasing it  */
  on_key_down : function (){
    var that = this;
    this.listenerObj.keydown(function(e){
      if(e.which !== 13 && !(that.in_range(e.which))){
        $(that.listenerObj).val('');
        return ;
      }
      var d = new Date();
      var curTime = parseInt(d.getTime());
      if(that.keyDownTime !== '' && that.keyDownTime !== NaN){
        that.twoKeyTime = curTime - that.keyDownTime;
      }
      that.keyDownTime = curTime;
    });
  },
  on_key_up : function(){
    var that = this;
    this.listenerObj.keyup(function(e){
      var d = new Date();
      var keyUpTime = d.getTime();
      that.oneKeyTime = parseInt(keyUpTime) - parseInt(that.keyDownTime);
      var isHand = that.checkHandInput();
      if(isHand && that.in_range(e.which)){
        layer.msg(' Manual input is prohibited ');
        $(that.listenerObj).val("");
      }
    })
  },
  on_key_press : function(){
    var that = this;
    this.listenerObj.keypress(function(e){
      if(e.which == 13 && that.check_barcode()){
        that.createListEl();
      }
    });
  },
  checkHandInput : function(){
    if((this.oneKeyTime > this.spanTime) || this.twoKeyTime > this.spanTime){
      return true;
    }else{
      return false;
    }
  },
}

The code was sorted out for 1 time and put into Github.

The hints in my js code use layer. js, so if you follow the example in index. html, introduce the relevant js:

<input id="barCode" value="" type="text" placeholder="stay focus" style="" name="">
$("#barCode").startListen({
  barcodeLen : 10,
  letter : true,
  number : true,
  show : function(code){
    layer.msg(code);
  }
});

Configurable parameters here: including the length of the bar code, whether it contains English letters, whether it contains numbers. And an show callback method, which will be called when the code scanning is successful and the barcode is legal, and return the value of the barcode for custom operations, such as uploading to the server.

In the code, the input box of the page is stay focus, so other input requirements of the page cannot be realized, and the call of keepFocusInput can be removed.