最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

jquery - How do I distinguish between a scanner input and keyboard input in Javascript? - Stack Overflow

programmeradmin2浏览0评论

I have gone through answers and came across two ways which can help in distinguishing between scanner and keyboard inputs. It can be done through:

  • Time Based: Scanner inputs are faster than manual keyboard inputs.

  • Prefix Based: Append a prefix to barcodes or scanners (inbuilt in scanner devices) and use it to identify the scanner inputs.

Here are the links: link 1, link 2 which I have used for the references.

The problem which I have run into is that whenever the user manually types some keyboard keys while the scanning event is being fired it gets added to scanner input and leads to inconsistent results.

Here is the code which I am using:

var BarcodeScannerEvents = function(){
  this.initialize.apply(this, arguments);
};

BarcodeScannerEvents.prototype = {
  initialize: function() {
    $(document).on({
      keypress: $.proxy(this._keypress, this)
    });
  },
  _timeoutHandler: 0,
  _inputString: '',
  _keypress: function (e){
    if(this._timeoutHandler){
      clearTimeout(this._timeoutHandler);
    }
    this._inputString += String.fromCharCode(e.which);
    //CHECKS FOR VALID CHARACTERS WHILE SCANNING 
    this._timeoutHandler = setTimeout($.proxy(function(){
      if(this._inputString.length <= 10){
        this._inputString = '';
        return;
      }
      $(document).trigger('barcodescanned', this._inputString);
      this._inputString = '';
    }, this), 20);
  }
};

new BarcodeScannerEvents();

The format for my barcode is: ~xxx-xxx-xxxxxx where x can be any number between 0-9. If a character which is a number is appended to the barcode it leads to wrong inserts in the database.

I have tried comparing the events from keyboard inputs and scanner inputs but to no avail. I have given a thought of appending extra characters before each digit and then invalidate the scanned barcode if consecutive numbers appear. But I don't feel this is best way to approach this problem. Can someone help me out here?

I have gone through answers and came across two ways which can help in distinguishing between scanner and keyboard inputs. It can be done through:

  • Time Based: Scanner inputs are faster than manual keyboard inputs.

  • Prefix Based: Append a prefix to barcodes or scanners (inbuilt in scanner devices) and use it to identify the scanner inputs.

Here are the links: link 1, link 2 which I have used for the references.

The problem which I have run into is that whenever the user manually types some keyboard keys while the scanning event is being fired it gets added to scanner input and leads to inconsistent results.

Here is the code which I am using:

var BarcodeScannerEvents = function(){
  this.initialize.apply(this, arguments);
};

BarcodeScannerEvents.prototype = {
  initialize: function() {
    $(document).on({
      keypress: $.proxy(this._keypress, this)
    });
  },
  _timeoutHandler: 0,
  _inputString: '',
  _keypress: function (e){
    if(this._timeoutHandler){
      clearTimeout(this._timeoutHandler);
    }
    this._inputString += String.fromCharCode(e.which);
    //CHECKS FOR VALID CHARACTERS WHILE SCANNING 
    this._timeoutHandler = setTimeout($.proxy(function(){
      if(this._inputString.length <= 10){
        this._inputString = '';
        return;
      }
      $(document).trigger('barcodescanned', this._inputString);
      this._inputString = '';
    }, this), 20);
  }
};

new BarcodeScannerEvents();

The format for my barcode is: ~xxx-xxx-xxxxxx where x can be any number between 0-9. If a character which is a number is appended to the barcode it leads to wrong inserts in the database.

I have tried comparing the events from keyboard inputs and scanner inputs but to no avail. I have given a thought of appending extra characters before each digit and then invalidate the scanned barcode if consecutive numbers appear. But I don't feel this is best way to approach this problem. Can someone help me out here?

Share Improve this question asked Dec 1, 2018 at 18:01 shaivikshaivik 3432 silver badges8 bronze badges 2
  • "it gets added to scanner input" leads me to believe the problem you want to solve is queuing the data, not distinguishing the inputs. I see you've got timeouts set, but maybe a more formal debounce function is called for? davidwalsh.name/javascript-debounce-function – jmargolisvt Commented Dec 1, 2018 at 20:43
  • @jmargolisvt Sorry for the delay in response. I do want to distinguish between the scanner and keyboard input. This is because when some keypress event happens due to input via keyboard while the barcode is being read by scanner, it interferes with the barcode and leads to faulty scans. – shaivik Commented Apr 3, 2019 at 7:17
Add a comment  | 

2 Answers 2

Reset to default 11

It is not necessary to judge from keyboard/barcode scanner.
If you decide the Enter(Carriage Return) key notification as input completion on any device, you can use it as simplest trigger to execute Price Look Up/input value verification.

Most scanners can add suffix code to the scanned barcode data for notification.
The most commonly used is the Enter key, but the Tab key may also be used.
By sending the suffix code by the barcode scanner, the possibility that the scanner notification and the key input are mixed is much lower than the timeout detection.

You can do as follows.

  • Using the setting barcode, it is set to inform that keys such as Enter, Tab etc. which are not normally included in the barcode as a suffix.
  • Bind an event listener for the corresponding suffix key to the text input field.
  • The key code is judged in the event listener, and if it is the suffix key, it assumes that the input of the barcode data is complete, carries out processing such as Price Look Up/input value verification, and moves the input focus to the next field.

For example see this article.
execute function on enter key


In Addition:
Your worries seem to be overwhelmed by situations that do not occur often.

If it really happens to be a problem, you should give up dealing with JavaScript.
Please acquire scanner data with another program by the following method. Please notify it to the application in some way.

If you want to continue keyboard input emulation, it is better to capture data before the browser or application is notified.

SetWindowsHookExW function / LowLevelKeyboardProc callback function
EasyHook / Indieteur/GlobalHooks

hook into linux key event handling / uinput-mapper
The Linux keyboard driver / LKL Linux KeyLogger / kristian/system-hook
system wide keyboard hook on X under linux / Error when trying to build a Global Keyboard Hook in Ubuntu Linux / 10.5.2 Keyboard and Pointer Events


Alternatively, set the scanner to serial port mode and have a dedicated program to receive it.

Serial API
JavaScript/JQuery communicate with SerialPort/COM1

Questions tagged opos / Questions tagged pos-for-.net / Questions tagged javapos

My first answer would be to train the users not to touch the keyboard while scanning. However, the tone of your responses to answers and comments makes it sound like you're thinking more of malicious, intentional attempts to corrupt the data.

Beyond kunif's very thorough answer, you're not going to find a solution to the problem you're envisioning or running into. The reason is that JavaScript is only going to receive from the operating system's input buffer; JS will not (cannot! for OS security reasons) distinguish how the input buffer is filled. If keystrokes and scan data are simultaneously being put into the buffer, that is an issue to try to address at the OS or hardware level. JavaScript is just not equipped to deal with it.

发布评论

评论列表(0)

  1. 暂无评论