Vanilla JavaScript示例

Question

我试图在javascript浏览器应用中处理来自条形码扫描器的输入。扫描仪输出是一串字符，其中还包含至少一个组分隔符（ASCII 29）。

当我将输入定向到ieepad ++时，输入会正确显示，包括Group Separator字符。当我将输入定向到<input type="text"> html字段时，组分隔符对象丢失;它既不在现场可见，也不能用javascript代码检测到。

<input type="text">对象是否截断ASCII控制字符？知道如何避免这种情况吗？

修改我使用与Raidox相似的代码来实现这一目标：

    inputField.onkeypress = catchGroupSeparatorAndEnter;
    var fncChar = String.fromCharCode(29);

    function catchGroupSeparatorAndEnter(event) {
    if (event.ctrlKey && event.which === 29) {
    inputField.value = inputField.value + fncChar;      
    event.preventDefault();
    event.stopPropagation();
}
...
}

这似乎适用于Chrome和Edge，但不适用于Firefox。我不知道如何让它在那里工作。

Answer 1

过去一周我一直在努力工作，今天我终于取得了突破。我不知道您的条形码扫描仪是如何工作的，但我们的行为类似于USB键盘并发送单独的按键。它确实发送了[GS]的按键，但该事件会被浏览器自动取消。因此它永远不会到达输入事件，这是将字符添加到输入的事件。我无法找到一种方法来阻止它取消，但你可以通过在按键事件中手动添加字符来解决这个问题。

我不知道您正在为您的应用程序使用什么框架，但我能够通过将其构建为自定义指令来使用AngularJS。下面的示例只是vanilla JavaScript，但您应该能够将它实现到您可能正在使用的任何框架中。

Vanilla JavaScript示例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Control Character Test</title>
    </head>
    <body>
        <input type="text" id="tacos" />
        <script>
            document.getElementById('tacos').addEventListener('keypress', function(e) {
                if (e.charCode === 29) {
                    this.value += String.fromCharCode(e.which);
                }
            });
        </script>
    </body>
</html>

您可以将上面的代码保存到HTML文件中，以测试此方法是否适用于条形码扫描程序。如果这不起作用，另一个值得探索的可能性是重新编程条形码扫描器以发送每个按键，然后这种方法应该有效。

另一个相关行为

在我的研究中，我还发现如果输入与其他字符同时发送，则输入会接受这些字符。例如，我们有另一个条形码扫描器，它将条形码数据作为一个事件发送。浏览器使用[GS]字符接受此输入。您也可以使用复制/粘贴执行此操作。你可能会利用这种行为来获得你想要的东西。

浏览器问题

值得注意的是，由于您使用的浏览器，您可能也会遇到这些方法中的任何一种问题。我们一次性发送数据的条形码扫描仪是一个Android设备。它有2个浏览器，chrome和专有浏览器。 [GS]字符显示为铬，但不是专有浏览器。

希望这有帮助！

Answer 2

受Sebastian G启发，此选项允许捕获所有descending order + Alt代码。但是，这不适用于IE。

number

Answer 3

输入控件忽略不可打印的字符，如[GS]

但是，条形码扫描器通常使用 CTRL + ] 模拟此字符，可以使用 onkeydown 事件捕获该字符（键代码17和221）：

    var ctrlPressed = false;
    yourInput.addEventListener('onkeydown', function (event) {
       ctrlPressed = 17 === event.keyCode;
       if (221 === event.keyCode && ctrlPressed)
          // do what you want here (ie. modify the input value)
    });

如果这不起作用，您可能需要首先通过记录来检查代码：

    yourInput.addEventListener('onkeydown', function (event) {
      console.log(event.keyCode)
    });

Answer 4

我遇到了同样的问题，并且基于事件监听器的想法，我为IE / Chrome和Firefox构建了自定义解决方案：

IE + Chrome（Raidox解决方案）：

document.getElementById('scanfield').addEventListener('keypress', function(e) {
    if (e.which === 29) {
        this.value += String.fromCharCode(e.which);
    }
});

Firefox：

var altValue = '';
document.getElementById('scanfield').addEventListener('keypress', function(e) {
    if(e.altKey){
        altValue += String.fromCharCode(e.which)
        if(altValue == '0029'){
            this.value += String.fromCharCode(29);
            altValue='';
        }
    }
});

Edge开箱即用。

Answer 5

Firefox不传输ALT按键，而仅传输按键按下和按键事件。
在每个浏览器中对我来说都是如此：

//GS1 Datamatrix <GS> in Firefox, Chrome & IE
var altValue = '';
document.getElementById('SKAN').addEventListener('keydown', function(e) {
    if(e.altKey){
        if(e.which != 18){
           altValue += e.which
        }
        if(altValue === '969698105'){
           this.value += String.fromCharCode(29);
        }
    }
});
document.getElementById('SKAN').addEventListener('keyup', function(e) {
    if(e.altKey === false){
      altValue = '';
    }
});

ASCII控制字符html输入文本

5 个答案:

Vanilla JavaScript示例

另一个相关行为

浏览器问题