通过刷卡进行HTML登录

Question

I am trying to create an html login page that allows a user to login via a card swipe (with a card reader attached to their computer). My thought original thought was to make a hidden text box, put the focus on the hidden text box, and when the card is swiped, the card info goes into the box and submits the form.

Problems: 1. I keep getting a JS error when I try xx.focus() on a hidden text box. 2. I made the textbox visible, but set its height and width to 1px. You can still see the cursor blinking in the textbox though.

Question: Anybody have a great way of implementing this idea?

Answer 1

If you don't want the user to ever see the textbox, you can use the old CSS " hiding stuff off of the screen " trick. Just set an absolute position to the left or right that no screen will be able to display. For example (pulled from the referenced page):

.offscreen {
    position: absolute;
    left: -999em;
}

Answer 2

Short answer:

Yes, an input hidden via css (not type="hidden" ) is actually the only way to go.

Why?

I've had to deal with keyboard emulation card readers in web browsers in the past. I've tried pure javascript solutions (eg just listening to keypress events on the DOM), however what I've experienced is that many times cards can have control characters in them that the browser reacts to.

Answer 3

Sounds like you are close. You could also do a quick Flash app where soem additional options come up. As for the html one try to set stuyle of text box color / padding to move the cursor frm view