barcode-scan-js
Advanced tools
JavaScript browser-based scanner keyboard input library for seamless integration of barcode and QR code scanning into web applications
The barcode-scan custom element is designed to simplify the process of scanning and validating barcodes in web applications. It listens for keyboard input and triggers a custom event, providing information about the scanned barcode's validity and other details.
You can install the barcode-scan custom element via npm:
npm install barcode-scan-js
https://stackblitz.com/edit/js-j8zukx?file=index.js,index.html
barcode-scan custom element in your HTML file:<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... -->
</head>
<body>
<barcode-scan></barcode-scan>
<!-- ... -->
</body>
</html>
config attribute. Here's an example configuration:<barcode-scan config='{"minLength": 8, "maxLength": 12, "scanEndsWithKey": "Enter"}'></barcode-scan>
The available configuration options are:
minLength (optional): The minimum length of a valid barcode (default: 1).maxLength (optional): The maximum length of a valid barcode (default: 14).scanEndsWithKey (optional): The key that indicates the end of a barcode scan (default: empty string).scanTimeoutMs (optional): The timeout (in milliseconds) to consider the input as a complete barcode (default: 3000).ignoreOverElements (optional): An array of HTML tag names to ignore when scanning (default: ["INPUT"]).scan event to receive barcode scan results:document.querySelector('barcode-scan').addEventListener('scan', (event) => {
const scanResult = event.detail;
if (scanResult.isValid) {
console.log(`Valid barcode scanned: ${scanResult.code}`);
} else {
console.error(`Invalid barcode scanned: ${scanResult.code}, Error: ${scanResult.errorMessage}`);
}
});
The scan event provides detailed information about the scanned barcode, including its code, length, validity, time taken to scan, cleaned code, and configuration.
barcode-scan custom element to scan and validate barcodes in your web application.Here's a simple example of how to use the barcode-scan custom element in an HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Barcode Scanner</title>
</head>
<body>
<h1>Barcode Scanner</h1>
<barcode-scan config='{"minLength": 6, "maxLength": 10, "scanEndsWithKey": "Enter"}'></barcode-scan>
<div id="scan-result"></div>
<script>
const scanResultElement = document.getElementById('scan-result');
document.querySelector('barcode-scan').addEventListener('scan', (event) => {
const scanResult = event.detail;
if (scanResult.isValid) {
scanResultElement.innerHTML = `Valid barcode scanned: ${scanResult.code}`;
} else {
scanResultElement.innerHTML = `Invalid barcode scanned: ${scanResult.code}, Error: ${scanResult.errorMessage}`;
}
});
</script>
</body>
</html>
This example sets up the barcode-scan custom element with a configuration and listens for the scan event to display the scan result on the page.
Feel free to customize the configuration and event handling to fit your specific barcode scanning needs.
FAQs
JavaScript browser-based scanner keyboard input library for seamless integration of barcode and QR code scanning into web applications
We found that barcode-scan-js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.