JavaScript区分扫码器与键盘输入异常：扫码仅显示条码后4位

你的问题出在扫码输入的检测逻辑上：当前代码在每检测到连续快速按键（间隔小于barcodeThreshold）时，就立即清空输入框并将当前inputBuffer赋值给输入框，随后清空buffer。但扫码器是连续快速输入一串字符，这种逻辑会导致前面输入的字符被反复清空覆盖，最终只保留最后几个字符。

比如扫码输入12345678时：

• 输入1：时间差为0（首次输入），进入else分支，启动延迟搜索
• 输入2：时间差<50，inputBuffer变为2，清空输入框并设置为2，调用processInput，然后清空buffer
• 输入3：时间差<50，inputBuffer变为3，清空输入框并设置为3，调用processInput，清空buffer
• 以此类推，最终输入框只会保留最后一个或几个字符

修正方案 #

正确的扫码检测逻辑应该是：

1. 收集所有连续快速输入的字符到buffer中，直到按键间隔超过阈值，或者检测到扫码器的结束标志（绝大多数扫码器会在扫码完成后自动输入回车Enter）
2. 当确认是扫码输入时，一次性清空输入框并填入完整的扫码内容，再执行搜索
3. 调整时间阈值适配不同扫码器（部分扫码器按键间隔可能略大于50ms，建议设为100ms）

修正后的代码 #

document.addEventListener("DOMContentLoaded", function () {
    const input = document.getElementById("searchParcels");
    let lastKeyTime = 0;
    let inputBuffer = "";
    const barcodeThreshold = 100; // 调整阈值适配更多扫码器
    const typingDelay = 500; // 延长键盘输入的延迟时间，避免误判
    let typingTimer;

    function processInput(page = 1) {
        let search_string = input.value;
        fetch(
            `${searchRoute}/search?query=${encodeURIComponent(search_string)}&page=${page}`,
            { headers: { "X-Requested-With": "XMLHttpRequest" } }
        )
        .then((response) => response.text())
        .then((data) => {
            document.querySelector(".parcels-list-container").innerHTML = data;
            attachPaginationLinks(search_string);
        })
        .catch((error) => console.error("Error:", error));
    }

    function clearInput() {
        input.value = "";
        inputBuffer = "";
    }

    function attachPaginationLinks(query = "") {
        const paginationLinks = document.querySelectorAll(".parcels-list-container .pagination a");
        paginationLinks.forEach((link) => {
            link.addEventListener("click", function (event) {
                event.preventDefault();
                const url = new URL(this.href);
                const page = url.searchParams.get("page");
                processInput(page);
            });
        });
    }

    input.addEventListener("keydown", function (e) {
        // 处理扫码器的回车结束标志
        if (e.key === "Enter") {
            e.preventDefault();
            // 如果buffer有内容，说明是扫码输入
            if (inputBuffer.length > 0) {
                input.value = inputBuffer;
                inputBuffer = "";
                processInput();
            }
            return;
        }

        const currentTime = new Date().getTime();
        const timeDifference = currentTime - lastKeyTime;

        if (timeDifference < barcodeThreshold) {
            // 连续快速输入，收集到buffer
            if (e.key.length === 1) {
                inputBuffer += e.key;
            }
        } else {
            // 间隔超过阈值，判断为键盘输入，清空buffer并重启延迟搜索
            clearTimeout(typingTimer);
            typingTimer = setTimeout(() => {
                processInput();
                inputBuffer = "";
            }, typingDelay);
            // 首次输入或非连续输入，buffer重置为当前字符
            inputBuffer = e.key.length === 1 ? e.key : "";
        }

        lastKeyTime = currentTime;

        // 监听输入间隔超过阈值的情况，完成扫码输入的处理
        clearTimeout(typingTimer);
        typingTimer = setTimeout(() => {
            if (inputBuffer.length > 1) { // 只有buffer长度大于1才判定为扫码（避免单个快速按键误判）
                input.value = inputBuffer;
                inputBuffer = "";
                processInput();
            }
        }, barcodeThreshold + 50);
    });
});

关键修改点 #

• 增加回车事件处理：利用扫码器自动回车的特性，作为扫码完成的明确标志，确保完整获取条码内容
• 调整buffer收集逻辑：连续快速输入时只收集字符，不立即更新输入框，直到输入结束再一次性赋值
• 优化阈值与延迟：将barcodeThreshold调整为100ms，适配更多型号的扫码器；延长键盘输入的延迟时间，减少误判
• 增加扫码判断条件：只有当buffer长度大于1时才判定为扫码输入，避免单个快速按键被误识别

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