Блог

У меня есть приложение в Angular 10, и я хотел бы реализовать ввод USB-сканера штрих-кодов (например, в режиме клавиатуры). Проблема в том, что я использую пакет ngx-barcodeput, где мне нужно поле ввода, которое должно быть активным при сканировании штрих-кодов. Как я могу использовать что-то вроде ngx-barcodeput без поля ввода? Я хотел бы, чтобы мой сканер был активен все время на странице, а не только когда я нажимаю на поле ввода. Есть какие-нибудь советы? Я искал в Интернете и не могу найти другого пакета, который можно использовать для USB-сканеров штрих-кодов в приложениях angular.

Этот код сканирует штрих-код из USB-сканера bacode в приложении angular,

HTML-файл:

     <div class="container">
        <header><h1>My App title</h1></header>
        <div class="row">
            <input type="text" (window:keypress)="onKey($event)"  autofocus />
            <p>barcode: {{ barcode }}</p> 
        </div>
    </div>
 

компонент приложения:

 import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'barcode-scanner',
  templateUrl: './scan-barcode.component.html',
  styleUrls: ['./scan-barcode.component.css'],

})
export class ScanBarcodeComponent implements OnInit {
  barcode: string='';
  values: string[] =[];
  constructor() { }

  ngOnInit(): void {
  }
  onKey(event: any) {
    this.barcode=event.target.value;
}

}

 

Смотрите полный код здесь: https://github.com/saurabhku/ex-angular-barcode-scan