如何隐藏条码扫描输入框同时正常接收条码读取值？

问题场景 #

现有条码读取代码运行正常，但将输入框隐藏后（改为type="hidden"或设置display:none），无法再接收条码扫描值。

原工作代码 #

JavaScript

$(document).ready(function(){
  $(".scanner-input").focus().on("input",function(){
       let barcode = $(this).val();  
  })
});

CSS

.lnr {
    margin-top: 5%;
    font-size: 1000%;
 }

HTML

<link href="https://cdn.jsdelivr.net/npm/pixeden-stroke-7-icon@1.2.3/pe-icon-7-stroke/dist/pe-icon-7-stroke.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="form" method="post" action="">
  <input type="text" name="ColabAssid" class="scanner-input" id="ColabAssid" value="">
  <button type="submit" class="btn btn-success btn-xl" onclick="inserir_assid();"> <i class="pe-7s-look lnr"></i></button>
</form>

失效的隐藏尝试 #

• 改为隐藏输入框类型：

<input type="hidden" name="ColabAssid" class="scanner-input" id="ColabAssid" value="">

• 设置display:none隐藏：

<input style="display:none;" type="text" name="ColabAssid" class="scanner-input" id="ColabAssid" value="">

可行解决方案 #

方案1：视觉隐藏但保留可聚焦能力 #

扫描枪本质是模拟键盘输入，需要输入框处于可聚焦状态。用CSS将输入框移出可视区域，但保持可聚焦：

.scanner-input {
    position: absolute;
    left: -9999px;
    top: -9999px;
    opacity: 0;
    /* 避免干扰页面交互 */
    pointer-events: none;
}

JS逻辑保持不变，页面加载时自动聚焦该输入框：

$(document).ready(function(){
  $(".scanner-input").focus().on("input",function(){
       let barcode = $(this).val();  
       // 可添加条码处理逻辑，例如自动提交表单
       // $(this).closest('form').submit();
  })
});

HTML保留type="text"输入框，应用上述CSS类即可。

方案2：监听全局键盘事件 #

不依赖输入框聚焦，直接监听文档的键盘输入，收集扫描的条码字符（扫描枪通常以回车键结束输入）：

$(document).ready(function(){
    let barcodeBuffer = '';
    $(document).on('keypress', function(e){
        // 回车键表示扫描完成
        if(e.keyCode === 13){
            const barcode = barcodeBuffer.trim();
            if(barcode){
                $('#ColabAssid').val(barcode);
                // 可选：自动提交表单
                // $('form[name="form"]').submit();
            }
            barcodeBuffer = '';
        } else {
            barcodeBuffer += String.fromCharCode(e.keyCode);
        }
    });
});

此时输入框可直接设置为type="hidden"：

<input type="hidden" name="ColabAssid" id="ColabAssid" value="">

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