Click here to Skip to main content
12,444,360 members (50,658 online)
Click here to Skip to main content
Add your own
alternative version


4 bookmarked

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

, 28 Jun 2015 CPOL
Rate this:
Please Sign up or sign in to vote.
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.
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) {
   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
Technical Lead Netways Arabia
Saudi Arabia Saudi Arabia
No Biography provided

You may also be interested in...


Comments and Discussions

SuggestionWhat about Cut/Paste Pin
andyquat29-Jun-15 11:27
memberandyquat29-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.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160811.3 | Last Updated 28 Jun 2015
Article Copyright 2015 by Yahya Mohammed Ammouri
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid