ASCII 控制字符html 输入文本

Question

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

当我将输入定向到 notepad++ 时，输入正确显示，包括组分隔符。当我将输入定向到 <input type="text"> html 字段时，Group Separator 对象丢失；它在现场既不可见，也无法用 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

输入控件忽略不可打印的字符，如 [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 2

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

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

原版 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] 字符的输入。您也可以使用 copy/paste 执行此操作。您也可以利用这种行为来获得您想要的东西。

浏览器问题

请记住，由于您使用的浏览器不同，您也可能运行在使用这些方法时遇到问题。我们一次性发送所有数据的条形码扫描器是一个 android 设备。它有 2 个浏览器，chromium 和一个专有浏览器。 [GS] 字符显示在铬中，但不是专有浏览器。

希望对您有所帮助！

Answer 3

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

IE + Chrome（Raidox 解决方案）：

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

火狐：

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 4

Firefox 不传输 ALT 按键，而只传输 keydown 和 keyup 事件。
这在每个浏览器中都适合我：

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

Answer 5

受 Sebastian G 的启发，此选项允许捕获所有 Alt + number 代码。然而，这在 IE 上不起作用。

    var altvalue = '';
    document.getElementById('scanfield').addEventListener('keydown', function (e) {
        if (e.altKey) {
            if (e.keyCode !== 18 /* ALT key */) { altvalue += e.key; }
        }
    });

    document.getElementById('scanfield').addEventListener('keyup', function (e) {
        if (e.altKey === false && altvalue != '') {
            this.value += String.fromCharCode(parseInt(altvalue));
            altvalue = '';
        }
    });

ASCII 控制字符html 输入文本

ASCII control character html input text

html

javascript

ascii

control-characters

原版 JavaScript 示例

另一个相关行为

浏览器问题