Blazor手持条码扫描器配合隐藏输入字段功能异常排查

核心问题在于：浏览器会阻止完全隐藏（比如display: none、hidden属性或visibility: hidden）的元素获取焦点，而条码扫描器的输入本质是模拟键盘输入，必须依赖可聚焦的输入框才能捕获。

解决方案：使用视觉隐藏但可聚焦的输入框 #

不要用常规的隐藏方式，而是用CSS让输入框在视觉上不可见，但保留可交互、可聚焦的特性，这是符合WCAG标准的实现方式。

步骤1：添加视觉隐藏的CSS类 #

在项目全局样式文件（比如wwwroot/css/app.css）中添加以下样式：

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

步骤2：在Blazor组件中使用该输入框 #

替换原来的隐藏输入框，使用这个视觉隐藏类，并确保组件初始化时让输入框自动获取焦点：

<input type="text" 
       class="visually-hidden" 
       @ref="barcodeInput"
       @oninput="HandleBarcodeScanned"
       autocomplete="off" />

@code {
    private ElementReference barcodeInput;

    // 组件首次渲染后自动聚焦输入框
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await barcodeInput.FocusAsync();
        }
    }

    // 处理扫描到的条码
    private void HandleBarcodeScanned(ChangeEventArgs e)
    {
        var scannedBarcode = e.Value?.ToString().Trim();
        if (!string.IsNullOrEmpty(scannedBarcode))
        {
            // 这里添加你的业务逻辑：提交条码、更新状态等
            Console.WriteLine($"扫描到条码：{scannedBarcode}");
            
            // 清空输入框，准备下一次扫描
            barcodeInput.Value = string.Empty;
        }
    }
}

进阶：处理带回车符的扫描器 #

很多条码扫描器会在条码末尾自动添加回车（Enter）键，你可以监听键盘事件来捕获完整的条码输入，避免逐字符处理的问题：

<input type="text" 
       class="visually-hidden" 
       @ref="barcodeInput"
       @onkeydown="HandleBarcodeKeyDown"
       autocomplete="off" />

@code {
    private ElementReference barcodeInput;
    private readonly StringBuilder _barcodeBuffer = new();

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await barcodeInput.FocusAsync();
        }
    }

    private void HandleBarcodeKeyDown(KeyboardEventArgs e)
    {
        // 捕获回车符，确认条码输入完成
        if (e.Key == "Enter")
        {
            var fullBarcode = _barcodeBuffer.ToString().Trim();
            if (!string.IsNullOrEmpty(fullBarcode))
            {
                // 处理条码逻辑
                Console.WriteLine($"完整条码：{fullBarcode}");
                
                // 重置缓冲区和输入框
                _barcodeBuffer.Clear();
                barcodeInput.Value = string.Empty;
            }
        }
        // 收集普通字符
        else if (!string.IsNullOrEmpty(e.Key) && e.Key.Length == 1)
        {
            _barcodeBuffer.Append(e.Key);
        }
    }
}

关键注意事项 #

• 绝对不要使用display: none或hidden属性隐藏输入框，这会让元素脱离文档流，彻底失去可聚焦能力。
• 添加autocomplete="off"可以避免浏览器自动填充功能干扰扫描输入。
• 如果页面有其他可聚焦元素，可监听输入框的焦点丢失事件，自动重新聚焦，确保扫描时输入框始终处于激活状态。

内容的提问来源于stack exchange，提问作者Tim D'haeyer