javascript - 将读卡器中的信用卡信息捕获到不可编辑的文本字段中

Question

我是 Javascript 方面的新手。这是我的问题:

我想从读卡器中获取信用卡信息，然后对其进行处理。到目前为止，我已经能够在 HTML 文本框字段中捕获虚拟信用卡数据 - 实际上这不是火箭科学，因为当卡片通过读卡器刷卡时，读卡器输入只是一组键盘事件。问题是它仅在文本字段上有 光标焦点 时才有效。如果我将文本字段变成只读框，它就不起作用——这是我的确切要求。我应该能够屏蔽输入，显示几个 * 并且我应该能够使该字段不可编辑。我希望这可以使用放置在文本框上的透明 div 来完成 - 但我不知道如何实现。

我也乐于接受其他想法。

Answer 1

您可以使用 javascript 设置禁用文本字段的值，并通过 document.onkeydown = function(e) { ... } 获取击键事件数据。不需要隐藏的 div。

我假设您的页面上还有其他字段，这将使您很难知道何时捕获读卡器数据。您是否足够幸运，您的信用卡读卡器发送了一些独特的第一个字符，因此您知道键盘事件来自读卡器而不是用户击键？如果是这样，那么您可以聆听那些特定的击键，这样您就不必担心设置焦点。否则可以考虑像“读取信用卡”这样的按钮，它有一个 on("click") 函数设置为读取接下来的 xx 位数字。

这里有一些调试代码，您可以使用它来查看您的阅读器是否发送了您可以监听的任何唯一字符:

document.onkeydown = function(d) {
    console.log( d.which ? d.which : window.event.keyCode);
};

可以想象，在使用阅读器时，还有一些其他独特的事件信息。也许查看设备的手册。