A javascript solution to Accept data entry from magnetic stripe card readers only.

Introduction

A magnetic stripe reader, also called a swipe card machine, magstripe reader or just swipe machine, is a hardware device that reads the information encoded in the magnetic stripe located on the back of a plastic badge.
Also we can simply say it is a data capture device that reads information via contact with a card carrying .The card must be passed (swiped) through a slot for reading the stored information.

The magnetic strip reader allow the user to swipe the card in order to take the details from the card to any get focused text editor like notepad, word document or textbox.

Magnetic stripe cards are commonly used in credit cards, identity cards, and transportation tickets. They may also contain a microchip mostly used for business premises access control or electronic payment.

The Problem

I have web page that allowing the user to plug in a USB Magnetic Card Reader, swipe cards and fill the required information to the screen.
In my case I need to allow the user to use the magnetic card only to fill the textbox and I want to stop user from manually field population using the keyboard.

Most of the magnetic readers are connected through USB port and it is using the keyboard interface; because it does not need any driver software on the machine and it is compatible with all software running on the computers. Therefore, if you disable the keyboard, you disable the magnetic card reader.

The solution

I found one suggestion on the internet to handle this case by set appropriate prefix/suffix codes on the magnetic card track, So that when the card swiped, you can read and detect the information, but unfortunately this will not work if the user key in the prefix/suffix.
To solve the problem I have depended on the required time for populating field. The differences between started time for key in the first character and last character.

 //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;

The time for populating the field should not exceed 100 milliseconds. If it is exceeded that means this is manually key in and the textbox will be set to blank. By this way any manual key in will be prevented.

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

Point of interest

If you want to apply such solution you need to put in your consideration that sometimes the magnetic data in the card is scratched and you can not read or the reader machine stopped working. so you need to have an option to override in such cases like you ask for additional info like mobile number for the card holder

References

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

History

• 18-Jun-2015: Version 1.0.