将Ajax的keyup触发改为二维码扫码后即时触发的实现问题

问题原因 #

onchange事件需要输入框失去焦点才会触发，扫码填充后输入框通常仍处于聚焦状态，因此不会触发；而keyup会在每个字符输入后触发，不仅会导致多次无效AJAX请求，部分扫码器如果是批量填充内容（不模拟单个按键），甚至不会触发keyup。

解决方案 #

方案1：使用input事件+防抖函数 #

input事件会在输入框内容发生任何变化时触发（包括扫码、粘贴、键盘输入），配合防抖函数可以避免多次请求，等待输入完成后再执行查询。

修改后的AJAX代码：

$(document).ready(function() {
    // 防抖函数：延迟执行请求，避免连续触发
    function debounce(func, delay) {
        let timeoutId;
        return function() {
            clearTimeout(timeoutId);
            timeoutId = setTimeout(() => func.apply(this, arguments), delay);
        };
    }

    // 封装查询逻辑
    const fetchDetails = debounce(function() {
        var id_card = $(this).val().trim();
        // 身份证号长度校验，避免无效请求
        if (id_card.length !== 18) {
            document.getElementById("fullname").value = "";
            return;
        }
        
        $.ajax({
            url: "<?php echo base_url('index.php/scan/get_details'); ?>",
            method: 'post',
            data: {id_card: id_card},
            dataType: 'json',
            success: function(response) {
                document.getElementById("fullname").value = "";
                if (response.length > 0) {
                    document.getElementById("fullname").value = response[0].fullname;
                }
            }
        });
    }, 300); // 延迟300ms，可根据扫码速度调整

    // 绑定input事件，覆盖扫码/粘贴等场景
    $('#id_card').on('input', fetchDetails);
    // 兼容部分扫码器末尾触发的回车键
    $('#id_card').on('keyup', function(e) {
        if (e.key === 'Enter') {
            fetchDetails.call(this);
            e.preventDefault(); // 阻止回车默认行为，避免表单提交
        }
    });
});

方案2：监听扫码器的结束符（回车键） #

多数扫码器可配置为扫码完成后发送Enter键，直接监听回车键触发查询即可：

$(document).ready(function() {
    $('#id_card').on('keydown', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            var id_card = $(this).val().trim();
            if (!id_card) return;
            
            $.ajax({
                url: "<?php echo base_url('index.php/scan/get_details'); ?>",
                method: 'post',
                data: {id_card: id_card},
                dataType: 'json',
                success: function(response) {
                    document.getElementById("fullname").value = "";
                    if (response.length > 0) {
                        document.getElementById("fullname").value = response[0].fullname;
                    }
                }
            });
        }
    });
});

额外优化说明 #

• 移除原代码中无用的$("#id_card").load();：该方法用于加载HTML内容到元素，此处完全不需要。
• 增加身份证号长度校验：减少向后台发送无效请求，提升效率。

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