Keyboard sequence listener (like barcode readers) written in javascript. This lightweight library (3.2 kB when compressed) has no dependencies.
This library will detect the usage of a barcode scanner (or other devices), it won't generate barcode or read the barcode. Here are great javascript libraries to do it :
- To read barcodes with camera : https://github.com/serratus/quaggaJS
- To create barcodes : https://github.com/lindell/JsBarcode
http://kegi.github.io/sequence-listener/demo.html
By using bower (http://bower.io/)
bower install sequence-listener --saveThis AMD library can be loaded with requireJs or any other AMD Javascript toolkit
var SequenceListener = require('sequence-listener'); //singleton instance
new SequenceListener();Or, if you are old school :
<script src="sequenceListener.js"></script>
<script>var SequenceListener = new SequenceListener();</script>An event of type keyboardSequence is dispatched on the element who received the input. It could be a form input (if enabled) or the document body itself.
document.body.addEventListener('keyboardSequence', function (e) {
alert(e.detail.sequence);
})$(document.body).on('keyboardSequence', function(e){
alert(e.originalEvent.detail.sequence);
});A lot of devices like barcode readers, magnetic card readers, Yubikey (https://www.yubico.com/products/yubikey-hardware/) are detected as a keyboard when plugged in and send input the exact same way a humain would when using a standard keyboard.
This library will listen the keyboard entries and if the sequence provided is entered very fast, contains only certain chars and the length of the input match your criterias, an event will be triggered.
Even if it is almost impossible to type as fast as an hardware, there is multiple ways to differenciate the user's input and the devices input. Here are the options provided to helps you :
- You can calibrate the speed required to be a valid input
- You can specify a min length of the input or a specific length required
- You can specify the chars allowed on that inputs
- You can disabled the listener when the focus is inside a form input
The configurations need to be send in the constructor like this :
new SequenceListener({
debug: true
});| Configuration name | Default value | Description |
|---|---|---|
| debug | false | That will write debug output in the console to help you to calibrate the library |
| maxKeyboardDelay | 75 | When the delay (in milliseconds) between 2 strokes is greater than this number, the sequence is completed |
| minLength | 5 | If this is 1, any keystroke will be detected as an input |
| exactLength | null | If you use this, this is gonna override the minLength value. You need to set one or other or an exception will be thrown |
| allowedChars | [a-zA-Z0-9] | Regex use to validate chars individually, more information below |
| ignoreInputs | true | If this is true, the library will not listen when the focus is on a form input |
The default value 75 will work for most of the devices. The speed of the strokes is different for every devices and may vary a little bit, even on the same sequence. If you set this number too low, you might catch an uncompleted sequence or no sequence at all. If you set this number too high, the library might not be able to differenciate the devices and the users.
the time needed by the library to validate and record the input is also included on the maxKeyboardDelay. We might fix this eventually to ensure this number has the same meaning on all computers, no matter the performances.
This regex will be used to validate the chars individually. You can't add length valiation in this regex or this will fail. Also, it is important to note that invalid chars will not stop the recording of the input.
The reason why we decided to not stop the recording is because a lot of those devices add a "return" or other chars at the end of the string. We might add more options later to make it more strict.
If you want to catch only numbers : [0-9], the following string will be catch : ORDER-12345. The recorded input would be : 12345.
Feel free to comments, to send suggestions or to contribute by sending pull requests.