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

Question

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

我希望从读卡器捕获信用卡信息，然后对其进行处理。到目前为止，我已经能够在 HTML 文本框字段中捕获虚拟信用卡数据 - 实际上这并不是什么复杂的事情，因为读卡器输入只是在读卡器上刷卡时的一组键盘事件。问题是它仅cursor focus在文本字段上存在时才有效。如果我将文本字段变成只读框，它就不起作用 - 这正是我的要求。我应该能够屏蔽输入，显示几个*s 并且我应该能够使该字段不可编辑。我希望这可以使用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);
};

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