I'm currently toying with a basic webpage to act as a kiosk app.
The page will contain a basic form.
Attached to the PC directly is a barcode scanner in 'keyboard' mode. The barcode scanner automatically appends a char "13" at the end of each string. (I do have the option to also prefix a character to the string if required)
The scanner is to allow the user to scan a barcode (if they have it) - which can then be used to perform a looking. Of course, it is possible that the user doesn't have a barcode - they may just have a number, so they should be able to manually key the number to.
This scenario actually presents a number of challenges! I don't think that I am going to find a barcode scanner that has a driver that can be accessed via Javascript. (ie I can' send messages to enable and disable the scanner).
I really don't want to code this in any .Net - PHP only..
What I would like to do is somehow redirect any input that comes from the barcode scanner to a hidden field. Any other input keyed manually by the user should appear in the current element that has focus.
The following JQuery script looks pretty good. (https://github.com/kabachello/jQuery-Scanner-Detection)
<input id="userInput" type="text" autofocus/>
<br>
<div class="test">
<input id="scannerInput" type="text" value="barcodescan" autofocus/>
</div>
$(document).scannerDetection({
//https://github.com/kabachello/jQuery-Scanner-Detection
timeBeforeScanTest: 200, // wait for the next character for upto 200ms
avgTimeByChar: 40, // it's not a barcode if a character takes longer than 100ms
endChar: [13],
//preventDefault: true, //this would prevent text appearing in the current input field as typed
onComplete: function(barcode, qty){
alert(barcode);
} // main callback function
});
I've set up a fiddle here: https://jsfiddle.net/upnorthal/4fuyvjnv/
The above Javascript is actually extremely accurate in detecting whether the data has been keyboard typed or from the scanner.
If I uncomment the line ''' //preventDefault: true, '''' I can prevent text appearing in the text field that has focus. What I need to have happen is for the text to appear if it was keyed manually.
Any ideas how I can do this? In psuedo code it sounds like
Al
Actually you can use Input devices with JavaScript. Like webcam etc.
http://stackoverflow.com/questions/21633537/javascript-how-to-read-a-hand-held-barcode-scanner-best
The part about prefixes. If the input has the prefix it came from scanner. Strip out the prefix and post the form.
Input does work yes, but only in 'keyboard mode' . I cant run the scanner in its native mode and access its API via Javascript calls though. (which would have been nice)
So keyboard mode detection works by using Javascript either looking for a start / and or end character or perhaps by speed that the scanner submitted each key press (or a combination of all three).
I've updated the fiddle and it now works. There is a fallback of On Error that fires when the scanner isn't detected
$(document).scannerDetection({
//https://github.com/kabachello/jQuery-Scanner-Detection
timeBeforeScanTest: 200, // wait for the next character for upto 200ms
avgTimeByChar: 40, // it's not a barcode if a character takes longer than 100ms
preventDefault: true,
endChar: [13],
onComplete: function(barcode, qty){
validScan = true;
$('#scannerInput').val (barcode);
} // main callback function ,
,
onError: function(string, qty) {
$('#userInput').val ($('#userInput').val() + string);
}
});
The above does what I want, but its not great for fast typers. The text doesn't appear on screen instantly. There is a pause for a fraction of a second .
jekinney - many thanks for the link, I will check out that method and see if the performance is improved.
Why not allow the form to fill the regular input field, but also set a 'was_scanned' hidden field if you detect fast input like from the scanner.
Then you don't have to mess around with the input field at all, just listen to it?
I was having the same problem as upnorthal.
I made some modifications to better support both scanning and keyboard input.
My modified version can be found at https://drive.google.com/file/d/1si1-nutBsEaHXdjJHg1pmuGShYfzVxbh/view?usp=sharing
This modification is based on the version of jquery.scannerdetection.js found at https://github.com/kabachello/jQuery-Scanner-Detection
In my modification preventDefault has been redefined such that when set true, only scanner input is suppressed from appearing in input fields. Characters can be typed in from the keyboard as normal. Scanning is supported regardless of what field the input cursor currently occupies, including fields that can be typed into via the keyboard.
In addition, a scan is considered to have started only when a scan prefix has been encountered. This allows users to type rapidly without the possibility of typed characters being discarded.
yes right in the scannerDetection script will reflected in all input fields..
make it ignoreIfFocusOn: 'input', from top of scannerDetection function like
$(document).scannerDetection({
ignoreIfFocusOn: 'input',
timeBeforeScanTest: 200, // wait for the next character for upto 200ms
avgTimeByChar: 40, // it's not a barcode if a character takes longer than 100ms
preventDefault: true,
endChar: [13],
onComplete: function(barcode, qty){
validScan = true;
$('#scannerInput').val (barcode);
}
,
onError: function(string, qty) {
res = string.split("-");
var inward_id = res[0];
var per_id = res[2];
} }); it is working fine..
Please or to participate in this conversation.