Javascript：隐藏输入条码扫描器答案

【问题标题】：Javascript: Hidden Input Barcode ScannerJavascript：隐藏输入条码扫描器
【发布时间】：2021-07-10 22:58:51
【问题描述】：

这是我当前的设置：我有一个键盘模式的条形码扫描仪。我正在尝试扫描到隐藏的、失焦的输入。我要读取的条形码如下：asterisk[barcode-info]asterisk 并粘贴为 |[barcode-info]。（Stackoverflow 不允许我只放置星号，但这是 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 捕获它并更新“条形码输入”隐藏输入，然后将其自身提交给服务器。我已经弄清楚了服务器端，只是不确定如何从 JS（不是 Jquery）获取隐藏的输入。

有人建议尝试使用粘贴事件侦听器，但它似乎根本没有捕获输入。扫描仪确实可以工作，因为我可以在焦点对准时输入 type="text"。

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

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 = '';
        }
    });

【问题讨论】：

标签： javascript input barcode barcode-scanner hidden-field

【解决方案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;" />

【讨论】：

将输入类型更改为某些不受支持的值有何帮助？如果您打算将其更改为 type="text"，您就错过了问题的重点。
如果该值与您所说的 type = text 一起使用。过去我使用过 style = "display: none;"不显示该字段但值在那里
我认为他正在尝试使用 type="text"，并且他还添加了 display:none 作为样式标签。话虽如此，我仍然需要捕获输入，并更改输入字段的值......然后处理它现在是页面上需要以这种方式排列的物理元素的事实它不会干扰其他任何事情。
对不起，我不明白，我认为@mark-warren 回答你更好:-)
我错过了display:none。这就是为什么添加对您的建议的解释而不是仅仅转储代码 sn-p 的原因。然而，这还有其他问题。

【解决方案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;
  }
});

这应该让你大部分时间......

【讨论】：

【解决方案3】：

或者，与其在输入上查找事件或输入（*）的值，不如在值上定义一个事件并使用输入事件来简单地设置值。

一旦输入停止，无论是 1 秒（或很可能更短），然后触发表单。

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

例如

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>

【讨论】：

【解决方案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";
}

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

【讨论】：