954,600 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

disallow keyboard input & only allow scan card to key in input (javascript)

Hello,

I wanna ask about scan card. Is there any way to disallow keyboard input and only allow scan card input to key in a field?
FYI, I am using vbscript, html and javascript for this program. So, may be doing something with the javascript?
How about limit the time of input? I really have no idea.


Thank you so much

avocado_juice
Newbie Poster
11 posts since Oct 2010
Reputation Points: 10
Solved Threads: 0
 

One way I have gotten it to work is as follows:

Have a button (Scan Card)
Click the Scan Card button to have a popup window show up.
The popup window sets focus to a textbox with a width and height of 0px (setting display: hidden will throw security errors later)
Swipe the card
The input is put into the textbox
Create functions to parse the output that is put to the textbox (most cards have a predefined number of characters per line)
When the scan is complete (You will need to determine the condition at which you can say it is complete, x number of character per line) fill in the form in the parent window.

I have implemented this for a Canadian driver's license in an app. I am not allowed to share the code but can assure you it can be done.

stbuchok
Master Poster
730 posts since May 2011
Reputation Points: 120
Solved Threads: 93
 

Avocado_juice,

Now I have read stbuchok's answer, I think I better understand the problem however I would approach it differently, without needing to use a popup window.

Assuming you already have the means to get the scan process to populate an HTML field, then all you need is a way to prevent the field from accepting keyboard input.

The most obvious approach is simply to disable the field:

<input type="text" name="myField" disabled="disabled" />

However, disabled fields are not included when a form is submitted.

There are several approaches to overcome this.

1. Don't disable the field but prevent it from taking focus.

onload = function() {
  document.myform.myField.onfocus = function(){ this.blur(); };
}

2. Enable the disabled field immediately before the form is submitted.

onload = function() {
  document.myform.onsubmit = function() {
    this.myField.disabled = false;
  };
};

3. Copy the disabled field's value to a hidden field immediately before the form is submitted.

<input type="text" name="myField" disabled="disabled" />
<input type="hidden" name="myHiddenField" />
onload = function() {
  document.myform.onsubmit = function() {
    this.myHiddenField.value = this.myField.value;
  };
};


Airshow

Airshow
WiFi Lounge Lizard
Moderator
2,683 posts since Apr 2009
Reputation Points: 321
Solved Threads: 372
 

Thanks a lot to stbuchok and Airshow. I tried using time as the limit and it works too. I use setTimeout() and set the time to 300milliseconds. When user keys in in more than 300milliseconds, the textbox is set to blank. It prevents user to key in manually.


Thanks for your help!

avocado_juice
Newbie Poster
11 posts since Oct 2010
Reputation Points: 10
Solved Threads: 0
 

Have you checked if somebody paste the number then what happens?

urtrivedi
Nearly a Posting Virtuoso
1,306 posts since Dec 2008
Reputation Points: 257
Solved Threads: 270
 

sorry, I didn't think about that. but they don't use computer keyboard to key in the number (so they don't have copy paste button). The keyboard only has numbers and enter button

avocado_juice
Newbie Poster
11 posts since Oct 2010
Reputation Points: 10
Solved Threads: 0
 

This question has already been solved

Post: Markdown Syntax: Formatting Help
You
View similar articles that have also been tagged: