scanner-keyboard-input/demo.html at main · ArkURL/scanner-keyboard-input · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Scanner & Keyboard Input Demo</title>
    <style>
        body { font-family: sans-serif; padding: 20px; }
        .log-box { width: 100%; height: 300px; border: 1px solid #ccc; overflow-y: scroll; background: #f9f9f9; padding: 10px; font-family: monospace; }
        .status { font-weight: bold; color: blue; }
        .input-area { margin-bottom: 20px; padding: 10px; background: #eee; border-radius: 5px; }
    </style>
    <!-- 引入库文件 -->
    <script src="json2.js"></script>
    <script src="main.js"></script>
</head>
<body>
    <h1>Scanner Input Demo</h1>
    <p>请尝试使用键盘输入数字，或使用扫码枪扫码。</p>

    <div class="input-area">
        当前状态: <span id="status" class="status">INIT</span>
    </div>

    <h3>Event Log:</h3>
    <div id="log" class="log-box"></div>

    <script>
        function log(msg) {
            var box = document.getElementById('log');
            var line = document.createElement('div');
            line.innerHTML = '[' + new Date().toLocaleTimeString() + '] ' + msg;
            box.appendChild(line);
            box.scrollTop = box.scrollHeight;
        }

        var scanner = new ScannerKeyboardInput({
            onScanStart: function() {
                log('Scan Started');
            },
            onScanInput: function(val) {
                // log('Scanning: ' + val); // 可选：打印每个字符
            },
            onScanComplete: function(code) {
                log('<span style="color:green">SUCCESS SCAN: ' + code + '</span>');
                alert('扫码成功: ' + code);
            },
            onKeyboardInput: function(char, loc, full) {
                log('Key Input: ' + char + ' (Buffer: ' + full + ')');
            },
            onKeyboardComplete: function(code) {
                log('<span style="color:blue">SUCCESS KEYBOARD: ' + code + '</span>');
            },
            onStatusChange: function(name, val) {
                document.getElementById('status').innerText = name;
                log('Status Changed: ' + name);
            },
            onError: function(msg) {
                log('<span style="color:red">ERROR: ' + msg + '</span>');
            }
        });

        // 初始化
        scanner.init();
        log('Scanner Initialized. Waiting for input...');
    </script>
</body>
</html>