用于处理扫描仪输入的按键事件仅返回第一个字符答案

【问题标题】：keypress event for handling scanner input returns only first character用于处理扫描仪输入的按键事件仅返回第一个字符
【发布时间】：2020-07-30 21:00:26
【问题描述】：

我正在使用 Datalogic Heron 扫描仪进行条形码输入，并使用此代码获取条形码值 -

<input type="text" id="scannerBarcode" />

和

<script>
    document.addEventListener("keypress", function(e) {
        alert(e.key);
        $("#scannerBarcode").val(e.key);
        e.preventDefault();
        });      
</script>

我遇到了两个问题 -

使用 e.key 只返回第一个字符。我不知道如何捕获完整的条形码值。当我专注于一个简单的 txt 文件时，条形码会显示整个值。
警报会闪烁，无需等待我单击“确定”。

这是我使用任何扫描仪的第一天，如果这是一个愚蠢的问题，请多多包涵。

任何人都可以指导如何解决上述问题。

谢谢！

【问题讨论】：

您是否试图捕捉整个文档上的按键，而不仅仅是输入？
将 alert(e.key) 更改为 console.log(e.key) 以查看在 keypress 事件期间没有阻塞警报窗口会发生什么（并在控制台窗口中查看结果）
因为它们通常会触发多个事件，而不仅仅是一个。永远不要使用警报进行调试.....
问题是条形码扫描仪是标准键盘输入，但是如果不将该值发送到输入字段，您将无法获得您注意到的整个字符串。你可以试试我关于斑马的回答（同样的问题）stackoverflow.com/a/54769272/3684265
是的，我试图捕获整个文档的按键，因为输入文本框可能/可能没有焦点。

标签： javascript jquery barcode-scanner

【解决方案1】：

问题是条形码扫描仪是标准键盘输入，但如果不将该值发送到输入字段，您将无法获得您注意到的整个字符串。你可以试试我关于斑马的回答（同样的问题）https://stackoverflow.com/a/54769272/3684265

与您现有代码保持一致的另一个选项是不要提醒APPEND 每个keypress 上的条形码值。

var barcode = document.querySelector("#scannerBarcode");
document.addEventListener("keypress",function(e){
   if(e.keyCode != 13){
       barcode.value += e.key;
   }
   e.preventDefault();
});

&lt;input type="text" id="scannerBarcode"&gt;

【讨论】：

【解决方案2】：

对于由全局文档按键事件管理的条形码输入，您可能会在读取条形码时预期会出现一系列键盘事件，因此您需要存储字符并在新扫描之间清除它们。此代码可让您附加来自快速输入序列的字符，并清理它以进行新扫描。

var scannerInput ="";
var lastClear=0;
document.addEventListener("keypress", function(e) {
        console.log(e.key);
        clearTimeout(lastClear);
        lastClear=window.setTimeout(function(){
           scannerInput="";
        },500);
        scannerInput+=e.key;        
        $("#scannerBarcode").val(scannerInput);
        e.preventDefault();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="scannerBarcode" type="text">

您无需关注文本输入。任何快速按下的按键组都将被捕获（与您从条形码接收数据的方式相同）。

如果您的条码扫描器使用回车（'Enter' 键）完成，您可以在e.Key = 'Enter' 时清除scannerInput 变量，而不是超时

【讨论】：