ASP.NET Core中如何始终隐藏select选择容器？解决重复扫码问题

1. 调整视图结构：分离视觉展示与表单提交容器 #

将原生多选select设置为隐藏（仅用于表单提交时的模型绑定），新增自定义区域展示已扫条码，并添加一个隐藏输入框专门接收扫码内容：

<form id="Export" method="post">
    <div class="form-group">
        <label asp-for="BarcodeList" class="control-label">已扫条码</label>
        <!-- 隐藏原生select，仅用于表单提交数据源 -->
        <select asp-for="BarcodeList" asp-items="@ViewBag.Barcodes" class="d-none" id="barcodeSelect" multiple>
        </select>
        <!-- 自定义条码展示区域 -->
        <div id="selectedBarcodes" class="border p-2 mt-2" style="min-height: 60px;"></div>
        <!-- 隐藏输入框，用于接收扫码内容并保持焦点 -->
        <input type="text" id="scanInput" class="d-none" autofocus>
    </div>
    <div class="form-group">
        <button type="submit" asp-action="Export">导出</button>
    </div>    
</form>

2. 添加基础样式 #

确保隐藏元素不可见，同时美化自定义展示区域：

.d-none {
    display: none !important;
}

#selectedBarcodes .barcode-tag {
    display: inline-block;
    background-color: #e9ecef;
    padding: 4px 8px;
    margin: 4px;
    border-radius: 4px;
    cursor: pointer;
}

#selectedBarcodes .barcode-tag:hover {
    background-color: #dee2e6;
}

3. 编写JavaScript实现扫码逻辑 #

通过监听隐藏输入框的键盘事件捕获扫码内容，自动匹配并选中条码，同时阻止原生select的展开行为：

document.addEventListener('DOMContentLoaded', function() {
    const scanInput = document.getElementById('scanInput');
    const barcodeSelect = document.getElementById('barcodeSelect');
    const selectedBarcodesDiv = document.getElementById('selectedBarcodes');
    let scanBuffer = '';

    // 确保扫码输入框始终保持焦点
    function maintainFocus() {
        if (document.activeElement !== scanInput) {
            scanInput.focus();
        }
    }
    document.addEventListener('click', maintainFocus);
    scanInput.focus();

    // 监听扫码输入（扫码设备通常以回车结束输入）
    scanInput.addEventListener('keydown', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            const barcode = scanBuffer.trim();
            if (!barcode) return;

            // 匹配对应的条码选项
            const targetOption = Array.from(barcodeSelect.options).find(opt => 
                opt.value === barcode || opt.textContent === barcode
            );
            
            if (targetOption && !targetOption.selected) {
                targetOption.selected = true;
                addBarcodeTag(barcode);
            }

            scanBuffer = '';
            scanInput.value = '';
        } else if (e.key.length === 1) {
            // 收集扫码字符
            scanBuffer += e.key;
        }
    });

    // 向展示区域添加条码标签
    function addBarcodeTag(barcode) {
        const tag = document.createElement('span');
        tag.className = 'barcode-tag';
        tag.textContent = barcode;
        // 支持点击移除条码
        tag.addEventListener('click', function() {
            tag.remove();
            const targetOption = Array.from(barcodeSelect.options).find(opt => 
                opt.value === barcode || opt.textContent === barcode
            );
            if (targetOption) targetOption.selected = false;
        });
        selectedBarcodesDiv.appendChild(tag);
    }

    // 初始化页面时加载已选中的条码
    Array.from(barcodeSelect.selectedOptions).forEach(opt => {
        addBarcodeTag(opt.value);
    });

    // 彻底阻止原生select的展开行为
    barcodeSelect.addEventListener('mousedown', e => e.preventDefault());
    barcodeSelect.addEventListener('keydown', e => e.preventDefault());
});

核心原理说明 #

• 隐藏原生select避免扫码时触发下拉展开，同时保留其ASP.NET Core模型绑定的功能；
• 使用隐藏输入框专门接收扫码内容，始终保持焦点确保扫码被正确捕获；
• 利用扫码设备末尾发送回车的特性，以回车作为扫码完成的触发标志，自动匹配并选中对应条码；
• 自定义展示区域让用户直观查看已录入条码，支持点击移除，优化操作体验。

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