├── .gitignore ├── README.md ├── bower.json ├── index.html └── jquery-code-scanner.js /.gitignore: -------------------------------------------------------------------------------- 1 | .idea/ 2 | bower_components/ 3 | docker-compose.yml 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # jQuery Code Scanner 2 | 3 | The aim here is to be able to get a scanned code from anywhere in a web page. 4 | 5 | You can [try the plugin](https://cscan.gprod.net) and see if it works with your code reader 6 | 7 | ## How it works 8 | 9 | A handheld scanner is exactly like a keyboard that will quickly enter the sequence of any scanned code. 10 | The trick is rely on the speed of entry to suspect a scan. 11 | 12 | ## Installation 13 | 14 | ```bash 15 | $ bower install jquery-code-scanner 16 | ``` 17 | 18 | ## Usage 19 | 20 | Include the tool 21 | 22 | ```html 23 | 24 | 25 | 26 | 27 | ``` 28 | 29 | Initialize an input 30 | 31 | ```javascript 32 | $('#code-scan').codeScanner(); 33 | ``` 34 | 35 | This input will receive any scanned code 36 | 37 | ## Options 38 | 39 | * `minEntryChars` _default: 8_ 40 | Minimum characters entered to be considered as a code reader 41 | 42 | * `maxEntryTime` _default: 100_ 43 | Maximum time (in millisecond) to enter the characters to be considered as a code reader 44 | 45 | ```javascript 46 | $('#code-scan').codeScanner({ 47 | maxEntryTime: 500, // milliseconds 48 | minEntryChars: 15 // characters 49 | }); 50 | ``` 51 | 52 | In this example, if 15 characters are not entered within 500ms, the string will not be taken as a scanned code 53 | 54 | * `onScan` _default: Function setting the code into the input_ 55 | This function will be called when a code is scanned 56 | 57 | ```javascript 58 | $('#code-scan').codeScanner({ 59 | onScan: function ($element, code) { 60 | console.log(code); 61 | } 62 | }); 63 | ``` 64 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jquery-code-scanner", 3 | "version": "0.0.6", 4 | "homepage": "https://github.com/Glideh/jquery-code-scanner", 5 | "authors": [ 6 | "Pierre de LESPINAY " 7 | ], 8 | "description": "Lightweight handheld code scanner detector plugin for jquery", 9 | "main": "jquery-code-scanner.js", 10 | "keywords": [ 11 | "jquery", 12 | "code-scanner", 13 | "barcode", 14 | "QRCode", 15 | "scanner", 16 | "barcode-reader" 17 | ], 18 | "license": "MIT", 19 | "ignore": [ 20 | "**/.*", 21 | "node_modules", 22 | "bower_components", 23 | "test", 24 | "tests" 25 | ], 26 | "dependencies": { 27 | "jquery": ">=1.5" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | jQuery Code Scanner - Demo 6 | 7 | 8 | 9 | 22 | 27 | 28 | 29 |
30 |

jQuery Code Scanner

31 |
32 |
33 |
34 | 35 |
36 | 37 |
38 |
39 |
40 |
41 |
42 | 43 | 44 | -------------------------------------------------------------------------------- /jquery-code-scanner.js: -------------------------------------------------------------------------------- 1 | (function ($) { 2 | $.fn.codeScanner = function (options) { 3 | var settings = $.extend({}, $.fn.codeScanner.defaults, options); 4 | 5 | return this.each(function () { 6 | var pressed = false; 7 | var chars = []; 8 | var $input = $(this); 9 | 10 | $(window).keypress(function (e) { 11 | var keycode = (e.which) ? e.which : e.keyCode; 12 | if ((keycode >= 65 && keycode <= 90) || 13 | (keycode >= 97 && keycode <= 122) || 14 | (keycode >= 48 && keycode <= 57) 15 | ) { 16 | chars.push(String.fromCharCode(e.which)); 17 | } 18 | // console.log(e.which + ":" + chars.join("|")); 19 | if (pressed == false) { 20 | setTimeout(function () { 21 | if (chars.length >= settings.minEntryChars) { 22 | var barcode = chars.join(''); 23 | settings.onScan($input, barcode); 24 | } 25 | chars = []; 26 | pressed = false; 27 | }, settings.maxEntryTime); 28 | } 29 | pressed = true; 30 | }); 31 | 32 | $(this).keypress(function (e) { 33 | if (e.which === 13) { 34 | e.preventDefault(); 35 | } 36 | }); 37 | 38 | return $(this); 39 | }); 40 | }; 41 | 42 | $.fn.codeScanner.defaults = { 43 | minEntryChars: 8, 44 | maxEntryTime: 100, 45 | onScan: function ($element, barcode) { 46 | $element.val(barcode); 47 | } 48 | }; 49 | })(jQuery); 50 | --------------------------------------------------------------------------------