Angular 10中无需输入框使用USB条码扫描器的实现咨询

刚好我之前在Angular项目里实现过类似的需求，键盘模式的USB条码扫描器本质就是快速模拟键盘输入，完全不需要依赖特定的npm包（当然也可以用小技巧适配你现有的ngx-barcodeput）。给你两个实用的方案：

这个方案不需要任何第三方包，直接利用Angular的事件监听能力，通过输入速度差异区分手动输入和扫描器输入：

1. 在根组件（比如app.component.ts）里监听全局键盘事件
2. 维护一个输入缓冲区，收集连续的按键字符
3. 用定时器判断：如果两次输入间隔超过阈值（比如200ms），就判定为手动输入，清空缓冲区；如果快速连续输入后遇到扫描器的结束符（通常是回车/Tab），就触发条码处理逻辑

代码示例：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription, fromEvent } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  private keySubscription: Subscription;
  private barcodeBuffer: string = '';
  private inputTimeout: any;

  ngOnInit() {
    // 监听整个文档的keydown事件
    this.keySubscription = fromEvent(document, 'keydown').subscribe((event: KeyboardEvent) => {
      // 忽略功能键，只收集可打印字符
      if (!event.ctrlKey && !event.altKey && !event.metaKey && event.key.length === 1) {
        this.barcodeBuffer += event.key;
      } 
      // 假设扫描器以回车作为结束符（可根据你的扫描器配置调整为Tab等）
      else if (event.key === 'Enter' && this.barcodeBuffer.length > 0) {
        this.processBarcode(this.barcodeBuffer);
        this.barcodeBuffer = '';
        return;
      }

      // 重置定时器：200ms内无新输入则清空缓冲区（区分手动输入）
      clearTimeout(this.inputTimeout);
      this.inputTimeout = setTimeout(() => {
        this.barcodeBuffer = '';
      }, 200);
    });
  }

  private processBarcode(barcode: string) {
    console.log('扫描到条码:', barcode);
    // 这里添加你的业务逻辑：比如发起查询、跳转页面等
  }

  ngOnDestroy() {
    // 销毁订阅，避免内存泄漏
    this.keySubscription?.unsubscribe();
    clearTimeout(this.inputTimeout);
  }
}

如果你不想放弃现有的ngx-barcodeput包，可以用一个始终保持焦点的隐藏输入框来实现全局扫描：

1. 在根组件里添加一个完全不可见的输入框
2. 初始化时让它获得焦点，同时监听blur事件，自动重新聚焦
3. 把ngx-barcodeput绑定到这个隐藏输入框上

代码示例：

<!-- app.component.html -->
<input 
  type="text" 
  style="position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0;"
  #hiddenScannerInput
  barCodePut
  (onBarCodeScanned)="handleScannedBarcode($event)"
>

// app.component.ts
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  @ViewChild('hiddenScannerInput') hiddenInput: ElementRef<HTMLInputElement>;

  ngOnInit() {
    // 初始聚焦
    this.keepInputFocused();
    // 输入框失焦时自动重新聚焦
    this.hiddenInput.nativeElement.addEventListener('blur', () => {
      setTimeout(() => this.keepInputFocused(), 0);
    });
  }

  private keepInputFocused() {
    this.hiddenInput.nativeElement.focus();
  }

  handleScannedBarcode(barcode: string) {
    console.log('扫描到条码:', barcode);
    // 执行你的业务逻辑
  }
}

• 先测试你的扫描器：有些扫描器可以自定义前缀/后缀（比如添加特定字符作为开始/结束标记），利用这些标记可以更精准地识别扫描内容
• 调整阈值：方案一中的200ms是通用值，你可以根据自己扫描器的输入速度微调（比如150ms或250ms）
• 内存泄漏：全局事件监听一定要在组件销毁时取消订阅，避免内存泄漏

内容的提问来源于stack exchange，提问作者Jakub