【问题标题】：ASCII control character html input textASCII 控制字符 html 输入文本
【发布时间】：2018-06-26 02:07:58
【问题描述】：

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

当我将输入定向到记事本++ 时，输入会正确显示，包括组分隔符字符。当我将输入定向到<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。我不知道如何让它在那里工作。

【问题讨论】：

尝试探索这个答案，它可能会对你有所帮助。 stackoverflow.com/questions/31867551/…
谢谢，但我在该帖子中找不到任何有用的信息。我不需要在输入字段中添加任何字符，我需要阅读组分隔符，因为它告诉我一条信息在哪里结束，而另一条信息从哪里开始。还有其他想法吗？
请告诉我们您是如何接收数据的，您收到了什么以及如何将此值放入输入中。
同意，需要样品。您是否尝试在文本区域中使用pre？不过不用担心，微软花了 25 年的时间来修复它，他们刚刚做到了 :) blogs.msdn.microsoft.com/commandline/2018/05/08/…

标签： javascript html ascii control-characters

【解决方案1】：

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

我不知道您正在为您的应用程序使用什么框架，但我能够通过将其构建到自定义指令中来使其与 AngularJS 一起使用。下面的示例只是普通的 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] 字符的输入。您也可以通过复制/粘贴来执行此操作。您也可以利用这种行为来获得您想要的东西。

浏览器问题

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

希望这会有所帮助！

【讨论】：

【解决方案2】：

输入控件会忽略 [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)
    });

【讨论】：

您好，感谢您的回答。我尝试按照您的建议记录键码，但比以前更加困惑。 GS 输入作为以下序列传输：“18 96 96 98 105”，即“alt ` ` b i”。但是，如果您使用此代码并从代码中减去 48，您会得到“0 0 2 9”，这是 GS 的正确 ascii 代码。到目前为止，我不知道如何解释或使用这些信息。任何想法？我仍在调查这个问题，因为接受的答案在 Firefox 中不起作用。
@user2007080 ASCII 码是在键盘上输入的（有时可能在键盘上）。因此，您必须在按下 ALT 时从按下的键中找出数字。所以你的观察很有意义。

【解决方案3】：

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

【讨论】：

【解决方案4】：

我遇到了同样的问题，基于事件监听器的想法，我为 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 开箱即用。

【讨论】：

【解决方案5】：

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

【讨论】：