Click here to Skip to main content
14,331,865 members

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

Rate this:
4.73 (5 votes)
Please Sign up or sign in to vote.
4.73 (5 votes)
28 Jun 2015CPOL
To allow the user to swipe magnetic card on magnetic reader to fill the Textbox and stop manual field population using keyboard.


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. Image 1
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. Image 2

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.

Image 3
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) {
   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



  • 18-Jun-2015: Version 1.0.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Yahya Mohammed Ammouri
Saudi Arabia Saudi Arabia
No Biography provided

Comments and Discussions

QuestionIs this device specific code? Pin
Member 1019012617-Jul-17 20:35
professionalMember 1019012617-Jul-17 20:35 
AnswerRe: Is this device specific code? Pin
Yahya Mohammed Ammouri26-Jul-17 20:18
memberYahya Mohammed Ammouri26-Jul-17 20:18 
SuggestionWhat about Cut/Paste Pin
aquatember29-Jun-15 11:27
professionalaquatember29-Jun-15 11:27 
GeneralRe: What about Cut/Paste Pin
Yahya Mohammed Ammouri29-Jun-15 11:49
memberYahya Mohammed Ammouri29-Jun-15 11:49 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Posted 28 Jun 2015

Tagged as


4 bookmarked