{"library":"onscan.js","title":"onScan.js: Hardware Barcode Scanner Event Handler","description":"onScan.js is a lightweight, framework-agnostic JavaScript library designed to accurately detect and process input from hardware barcode scanners operating in either keyboard-wedge or clipboard (paste) mode. It intelligently distinguishes between normal keyboard input and high-speed scanner input by analyzing keypress timing, prefix/suffix characters, and other configurable parameters. Upon successful detection, it triggers a custom `scan` DOM event on the attached element or invokes a specified callback function, providing the scanned code and an optional quantity. The library is currently stable at version 1.5.2 and receives updates to enhance detection algorithms and add features like `captureEvents` (v1.5) for event priority. Its primary differentiation lies in its flexibility, robust detection logic, and comprehensive options for fine-tuning scanner behavior, making it suitable for a wide range of browser-based applications that require reliable barcode input without relying on specific frameworks.","language":"javascript","status":"active","last_verified":"Thu Apr 23","install":{"commands":["npm install onscan.js"],"cli":null},"imports":["import onScan from 'onscan.js'","<!-- Include onscan.min.js in your HTML -->\n<script src=\"path/to/onscan.min.js\"></script>\n<script>\n  onScan.attachTo(document);\n</script>","const onScan = require('onscan.js');"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"// Enable scan events for the entire document with custom options\nonScan.attachTo(document, {\n    suffixKeyCodes: [13], // enter-key expected at the end of a scan\n    reactToPaste: true, // Compatibility to built-in scanners in paste-mode\n    minLength: 3, // Minimum length of a scan code\n    timeBeforeScanTest: 100, // Wait 100ms for more characters\n    onScan: function(sCode, iQty) { // Callback for successful scan\n        console.log('Scanned: ' + iQty + 'x ' + sCode); \n        document.getElementById('scanned-output').innerText = `Last Scan: ${iQty}x ${sCode}`;\n    },\n    onKeyDetect: function(iKeyCode){ // Output all potentially relevant key events - great for debugging!\n        // console.log('Pressed: ' + iKeyCode);\n    },\n    captureEvents: true // new in v1.5: ensures onScan gets events first\n});\n\n// Register a traditional DOM event listener for the 'scan' event (alternative to onScan callback)\ndocument.addEventListener('scan', function(event) {\n    const sScancode = event.detail.scanCode;\n    const iQuantity = event.detail.qty;\n    console.log('DOM scan event: ' + iQuantity + 'x ' + sScancode);\n});\n\n// Simulate a scan programmatically - e.g. to test event handlers\n// This will trigger the onScan callback and the custom DOM 'scan' event\nonScan.simulate(document, 'ABC12345XYZ');\n\n// Element to display scanned output\nconst outputDiv = document.createElement('div');\noutputDiv.id = 'scanned-output';\noutputDiv.style.marginTop = '20px';\noutputDiv.style.padding = '10px';\noutputDiv.style.border = '1px solid lightgray';\noutputDiv.innerText = 'Waiting for scan...';\ndocument.body.appendChild(outputDiv);","lang":"javascript","description":"Initializes onScan.js on the document with common options, including a custom scan callback and a DOM event listener, then simulates a barcode scan to demonstrate functionality and output.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}