仅接受磁条卡读卡器数据输入的 JavaScript 解决方案。

引言

磁条卡读卡器，也称为刷卡机、磁条读卡器或刷卡机，是一种硬件设备，用于读取塑料卡背面磁条中编码的信息。
也可以简单地说，它是一种通过与带有磁条的卡片接触来读取信息的数据采集设备。必须将卡片（刷卡）通过插槽才能读取存储的信息。

磁条卡读卡器允许用户刷卡，以便将卡片上的详细信息获取到任何获得焦点的文本编辑器，例如记事本、Word 文档或文本框。

磁条卡通常用于信用卡、身份证和交通票。它们也可能包含微芯片，主要用于商业场所的访问控制或电子支付。

问题

我有一个网页，允许用户插入 USB 磁卡读卡器，刷卡并填写屏幕上的所需信息。
在我的情况下，我需要允许用户仅使用磁条卡来填充文本框，并且我希望阻止用户使用键盘手动输入字段。

大多数磁条卡读卡器通过 USB 端口连接，并使用键盘接口；因为它不需要机器上的任何驱动程序软件，并且与计算机上运行的所有软件兼容。因此，如果您禁用键盘，您也会禁用磁条卡读卡器。

解决方案

我在互联网上找到一个建议，通过在磁条卡轨道上设置适当的前缀/后缀代码来处理这种情况，这样当刷卡时，您可以读取和检测信息，但不幸的是，如果用户输入前缀/后缀，这将不起作用。
为了解决这个问题，我依赖于填充字段所需的时长。从输入第一个字符开始到最后一个字符结束的时间差。

    //to make sure the entry happened from swipe card we check the time for populating text
   if (document.getElementById('txtCardReader').value.length == 1) {
       startdatetime = new Date();
   }
   // 8 is the last digit in my case
   else if (document.getElementById('txtCardReader').value.length == 8) {
       enddatetime = new Date();
       var difference_ms = enddatetime - startdatetime;

填充字段的时间不应超过 100 毫秒。如果超过，则表示是手动输入，文本框将被设置为空。通过这种方式，可以防止任何手动输入。

if (difference_ms > 100) {
   clear_text();
   return false;
}

关注点

如果您想应用这样的解决方案，您需要考虑磁卡上的磁数据有时会被刮擦而无法读取，或者读卡机停止工作。因此，您需要在这种情况下提供覆盖选项，例如要求提供卡持有人的其他信息，例如手机号码。

参考文献

• http://www.javascriptkit.com/javatutors/javascriptkey2.shtml
• http://24ways.org/2007/capturing-caps-lock
• http://whatis.techtarget.com/definition/magnetic-stripe-reader-magstripe-reader

历史

• 2015年6月18日：版本 1.0。