Capturing credit card data from a card reader into an unedited text field

Question

I am new to Javascript's point of view. Here is my problem:

I want to record credit card information from a card reader and then process it. Until now, I was able to capture fictitious credit card data in the HTML text box - in fact, this is not rocket science, because the card reader input is just a set of keyboard events when the card is read through a card reader. The problem is that it only works when there is a cursor focus in the text box. If I turn the text field into a read-only field, this will not work - this is my exact requirement. I should be able to mask the input, show a couple * , and I would have to make the field not editable. I hope this can be done with a transparent div placed in the text box, but I don't know how this can be achieved.

I am also open to other ideas.

Answer 1

You can use javascript to set the value of the disabled text field and get the keypress event data using document.onkeydown = function(e) { ... } . No need for hidden divs.

I assume that there are other fields on your page, which will make it difficult for you to know when to write the card reader data. Are you fortunate that your credit card reader sends unique character (s) to let you know that keyboard events are coming from the reader, and not from clicking the user? If so, then you can listen to these specific keystrokes, so you don’t have to worry about adjusting the focus. Otherwise, perhaps think of the “Read Credit Card” button, which has the on("click") function set to read the next xx digits.

Here is some debugging code you can use to find out if your reader sends unique characters that you can listen to:

 document.onkeydown = function(d) { console.log( d.which ? d.which : window.event.keyCode); }; 

Perhaps there is some other unique event information when the reader is used. Perhaps check the instruction manual.

Answer 2

Expand on the side of the credit card what Zach said ...

Please see the Wikipedia page on financial magnetic stripe cards for a description of the format of the track for the cards you will encounter. Your reader will output data with a carriage return at the end.

One option is to scan all keystrokes, and if you find the initial sequence %B start buffering, then save it where you need it when the carriage return is received. In addition, fault tolerance, if someone types %B , must have a keystroke, because the reader will print much faster than the user.

 %B4111111111111111^LASTNAME/FIRST I ^YYMM###..###?;4111111111111111=YYMM###..###?[CR]