Javascript：隐藏输入条码扫描器

Question

这是我当前的设置：我有一个键盘模式的条形码扫描仪。我正在尝试扫描到一个隐藏的和失焦的输入。我要读取的条形码如下：asterisk [barcode-info] asterisk.

<form method="post">
  <input type="hidden" name="action" value="barcode-scan"/>
  <input type="hidden" name="barcode-input" value="" id="barcode-input" onchange="this.form.submit()" />
</form>

输入条形码后，Javascript 应捕获它并更新“条形码输入”隐藏输入，然后将其自身提交给服务器。

有人建议尝试使用粘贴事件侦听器，但它似乎根本无法捕获输入。

更新：由于下面的精彩建议，我已经能够让输入正常工作！该表单将测试两个特定输入是否相互跟随，然后它将执行下一个功能。否则，它将删除日志常量中包含的任何信息。最终，是的，我让这个工作正常！

document.addEventListener('keyup', function(e){
        const log = document.getElementById('barcode-input');
        log.textContent += ' ' + e.code;
        document.getElementById('barcode-input').value = log.textContent;

        if (log.textContent.startsWith(' ShiftLeft')) {

            if (log.textContent.startsWith(' ShiftLeft Backslash')) {
            document.getElementById('barcode-input').form.submit();
            console.log('e.code, submit barcode info');
            }
        }

        else {
            log.textContent = '';
            document.getElementById('barcode-input').value = '';
        }
    });

Answer 1

转自

<input type="hidden" name="barcode-input" value="" id="barcode-input" onchange="this.form.submit()" />

在

<input type="test" name="barcode-input" value="" id="barcode-input" onchange="this.form.submit()" style="display:none;" />

Answer 2

如果屏幕上没有 input[type="text"] 元素，您将需要手动捕获键盘输入。大致如下：

document.addEventListener('keydown', (ev) => {
  if (ev.ctrlKey || ev.altKey) return;  // Ignore command-like keys
  if (ev.key == 'Enter') {
    // ...submit the content here...
  } else if (ev.key == 'Space') { // I think IE needs this
    document.getElementById('barcode-input').value += ' ';
  } else if (ev.key.length == 1) { // A character not a key like F12 or Backspace
    document.getElementById('barcode-input').value += ev.key;
  }
});

这应该可以帮助您完成大部分工作...

Answer 3

或者，不是在输入或输入值 (*'s) 上查找事件，而是在值上定义一个事件并使用输入事件来简单地设置值。

一旦输入停止，1 秒（或很可能更短）然后关闭表单。

如果必须将光标置于输入中，则扫描。您可能唯一的选择是使用自动对焦属性并隐藏输入，因为您无法聚焦隐藏的元素，尽管您也无法聚焦多个元素，因此请记住这一点，如果您要扫描多个输入，则必须显示输入，没办法。

例如

let elm = document.querySelector('input[name="barcode-input"]')

// watcher on the value, after 1 second, it invokes an event, i.e post form
let timer = 0
Object.defineProperty(window, 'barcode', {
  get: function () { return this.value },
  set: function (value) {
    clearTimeout(timer)
    this.value = value
    timer = setTimeout(() => {
      console.log('Post form')
    }, 1000) // do some tests, tweak if much less then 1 second to input the value 
  }
})

// it should trigger input even if its a keyboard
elm.addEventListener("input", e => barcode = e.target.value)

// ignore, below this line..

// set a value of barcode at intervals, only when its stopped entering (>1 second), then will it fire the callback
let i = 0
let t = setInterval(() => {
  barcode = (barcode || '')+"X"
  if (i >= 40) clearInterval(t)
  i++
}, 100)

// ignore... grab value from hidden input, put in #current
setInterval(() => document.querySelector('#current').innerHTML = barcode, 1000)

<input type="text" name="barcode-input" autofocus style="display:none" />

<div id="current"></div>

Answer 4

这是使用 keypress 的演示程序，它扫描传入的密钥流以查找 *[ 并捕获条形码，直到它看到 ]*。然后它将代码发送到服务器。虽然我已经在您的 HTML 中复制了表格，但此处的代码并未使用它。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
Working...
<form method="post">
    <input type="hidden" name="action" value="barcode-scan"/>
    <input type="hidden" name="barcode-input" value="" id="barcode-input" onchange="this.form.submit()" />
</form>
<p id="response"></p>
<script>
    (function(){
        "use strict";
        const bcAst = '*';
        const bcLeft = '[' ;
        const bcRight = ']';

        let barcodeIncoming = false;
        let lastChar = 0;
        let barcode = '';

        document.addEventListener('keypress', function(e){

            function sendCode(barcode) {
                console.log(barcode);
                let fd = new FormData();
                fd.append('barcode', barcode);
                fetch('myFile.php', {
                    method: 'POST',
                    body: fd
                })
                .then(resp=>{
                    resp.text().then(txt=>{document.getElementById('response').innerText = txt;})
                });
            }

            console.log(e.key);
            switch (e.key) {
                case bcAst:
                    if (barcodeIncoming && (lastChar === bcRight)) {
                        barcodeIncoming = false;
                        sendCode(barcode);
                    }
                    break;
                case (bcLeft):
                    if (lastChar === bcAst) {
                        barcodeIncoming = true;
                        barcode = '';
                    }
                    break;
                case (bcRight):
                    break;
                default:
                    barcode += (barcodeIncoming)?e.key:'';
                    break;

            }
            lastChar = e.key;

        });
    })();
</script>
</body>
</html>

当前的服务器文件非常简陋，但在这里起到了作用：

<?php
if (isset($_POST['barcode'])) {
    echo "Your barcode is {$_POST['barcode']}";
} else {
    echo "No barcode found";
}

注意 - 这仅进行了基本测试。您需要提高它的弹性，以防止与密钥流中的类似数据可能发生冲突。

Javascript：隐藏输入条码扫描器

Javascript: Hidden Input Barcode Scanner

javascript

input

barcode

hidden-field

barcode-scanner