How to implement jQuery monitoring code scanner to prohibit manual input

This article mainly shares with you the code scanning gun monitoring based on jQuery. If you just want to monitor and obtain barcode scanning information, you can use it directly. If you have more barcode judgment and processing logic that you need to expand yourself, I hope it can help everyone.

1. Functional requirements

Use the barcode scanner to scan the barcode, monitor and obtain the data from the scanner on a web page, and prohibit the user from performing manual input operations.

The initial idea is very simple, because the code scanner simulates keyboard input. When it is plugged into the computer using the USB interface, it becomes an external input device, which can be monitored with js. But how to determine whether the user input manually requires some processing.

2. Main issues

1. How to judge whether to input manually

2. How to judge whether a barcode input is completed

3.Solution

The solution to manual input is to compare the time interval from pressing a key to lifting it, and the time interval between two key presses.

Because the input speed of the code scanner is very fast, the input interval of the code scanner 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. Fast input. This interval value can be controlled to be very small, as long as it does not exceed the speed of scanning the code.

Judgement of input completion: You can monitor the changes in the input box. If the number of digits we want is reached, submit it to the server for processing; the second one is based on the code scanner, because the scanner I use The code gun can be configured to append a carriage return at the end if the code is successfully scanned. Therefore, based on the keycode of the carriage return, it can be judged that the input has ended, and then the value of the input box is obtained, and then subsequent processing (submission to the server, etc.) is performed.

4. Code

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

What needs to be judged is the time interval from pressing the button to lifting it, and the time interval between two keydowns.

The main manual input judgment code.

var barcode = {
  listenerObj: null,
  oneKeyTime : '', /* 一次按键时间间隔 */
  twoKeyTime : '', /* 两次按键时间间隔 */
  keyDownTime: '', /* 键按下的时间  */
  barcodeLen : 8 , /* 条形码长度   */
  spanTime  : 70, /* 一次按键按下到释放的时间间隔 */
  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('禁止手动输入');
        $(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;
    }
  },
}

I organized the code and put it on Github.

The prompts in my js code use layer.js, so if you use it, follow the example in index.html and 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 barcodes The length, whether it contains English letters, and whether it contains numbers. And a show callback method, this method will be called when the code is scanned successfully and the barcode is legal, and returns the value of the barcode in order to perform customized operations, such as uploading to the server.

The code has a stay focus on the input box of the page, so other input requirements on the page cannot be realized, and the call to keepFocusInput can be removed.

Related recommendations:

Use jQuery to monitor DOM element size changes

jquery monitors changes in div content Specific implementation ideas_ jquery

jQuery method of monitoring text box events and processing accordingly_jquery

The above is the detailed content of How to implement jQuery monitoring code scanner to prohibit manual input. For more information, please follow other related articles on the PHP Chinese website!