Angular 14中隐藏输入Div但保留扫码功能的实现方案问询

你用visibility: hidden无效的原因是：该属性仅隐藏元素视觉显示，但部分扫码枪的模拟输入依赖元素处于可交互且能获取焦点的状态，隐藏的元素可能无法正常获取焦点，导致扫码内容无法被捕获。以下是两种可靠的解决方案：

方案一：视觉隐藏但保留交互能力 #

给包含输入框的容器添加自定义样式类，通过绝对定位将元素移出可视区域，同时保证元素仍能接收焦点和输入：

SCSS 代码 #

.hidden-scanner-container {
  position: absolute;
  // 移出视口范围，完全不可见
  left: -9999px;
  top: -9999px;
  // 彻底隐藏视觉痕迹
  opacity: 0;
  // 确保元素可接收焦点和输入
  pointer-events: auto;
}

修改后的 HTML 代码 #

<div class="mt-5 hidden-scanner-container">
    <div class="flex flex-row align-content-center justify-content-between row-gap-6 card-container">
        <form>
                <input type="text" [ngModelOptions]="{standalone: true}" [(ngModel)]="barCodeNumber"
                    autofocus="true" placeholder="Enter/Scan RFID" (change)="mappingFunction($event)">
            </form>
    </div>
</div>

方案二：强制输入框获取焦点（可选增强） #

如果自动聚焦autofocus="true"在隐藏元素上失效，可以通过 Angular 的ViewChild主动为输入框设置焦点：

修改后的 HTML 代码 #

<div class="mt-5 hidden-scanner-container">
    <div class="flex flex-row align-content-center justify-content-between row-gap-6 card-container">
        <form>
                <input #barcodeInput type="text" [ngModelOptions]="{standalone: true}" [(ngModel)]="barCodeNumber"
                    placeholder="Enter/Scan RFID" (change)="mappingFunction($event)">
            </form>
    </div>
</div>

修改后的 TS 代码 #

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  // 保留你的组件元数据
})
export class YourComponent implements AfterViewInit {
  barCodeNumber: string = '';
  @ViewChild('barcodeInput') barcodeInput!: ElementRef<HTMLInputElement>;

  ngAfterViewInit() {
    // 组件初始化后强制输入框获取焦点
    this.barcodeInput.nativeElement.focus();
  }

  mappingFunction(event){
    console.log('Event print', event);
  }
}

这两种方法都能在完全隐藏输入框的同时，保留扫码功能的正常运行，核心是确保输入框始终处于可接收焦点和键盘输入的状态。

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