如何通过jQuery扫描二维码并提取对象中的User ID值？

扫码器本质是模拟键盘输入，会把二维码里的内容自动输入到焦点所在的输入框中，我们可以利用这个特性，通过jQuery监听输入内容提取目标值：

实现步骤与代码 #

1. 准备一个用于接收扫码内容的输入框（可设置为隐藏，扫码前确保焦点落在该输入框上）
2. 监听输入框的内容变化或扫码完成后的回车事件，解析JSON并提取User ID对应的值

HTML结构 #

<!-- 可隐藏输入框，扫码前需确保焦点在此 -->
<input type="text" id="scanInput" style="position:absolute; left:-9999px;">
<!-- 用于展示提取到的User ID -->
<div id="userIdResult"></div>

jQuery代码 #

$(document).ready(function() {
    // 让输入框获取焦点，确保扫码内容输入到此处
    $('#scanInput').focus();

    // 监听回车事件（多数扫码器输入完成后会自动触发回车）
    $('#scanInput').on('keydown', function(e) {
        if (e.keyCode === 13) {
            const scanContent = $(this).val().trim();
            try {
                // 解析JSON内容
                const data = JSON.parse(scanContent);
                // 提取并展示User ID
                const userId = data['User ID'];
                $('#userIdResult').text('提取到的User ID：' + userId);
                // 清空输入框，方便下次扫码
                $(this).val('');
            } catch (err) {
                $('#userIdResult').text('扫码内容格式错误，请重新扫描');
            }
        }
    });

    // 适配无回车的扫码器：监听输入内容变化，通过JSON结尾判断输入完成
    $('#scanInput').on('input', function() {
        const scanContent = $(this).val().trim();
        if (scanContent.endsWith('}')) {
            try {
                const data = JSON.parse(scanContent);
                const userId = data['User ID'];
                $('#userIdResult').text('提取到的User ID：' + userId);
                $(this).val('');
            } catch (err) {
                $('#userIdResult').text('扫码内容解析失败');
            }
        }
    });
});

注意事项 #

• 扫码前必须确保输入框处于焦点状态，否则扫码内容会输入到其他元素中
• 不同扫码器的输入行为可能有差异，可根据实际情况选择监听回车事件或输入内容变化
• 加入异常捕获，避免JSON格式错误导致页面报错

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