Barcode Scanner Support

Determine when input is from a keyboard or from a scanner

by ronnjoe

HTML

<form>
    <input id="scanInputss" />
    <input id="scanInput" />
    <button id="reset">Reset</button>
</form>
<br/>
<div>
     <h2>Event Information</h2>
Start: <span id="startTime"></span> 
    <br/>First Key: <span id="firstKey"></span> 
    <br/>Last Ley: <span id="lastKey"></span> 
    <br/>End: <span id="endTime"></span> 
    <br/>Elapsed: <span id="totalTime"></span>

</div>
<div>
     <h2>Results</h2>

    <div id="resultsList"></div>
</div>

CSS

.resultItem {
    padding 8px;::;
}

.Scanner {
    background-color: lightgreen;
}
.Keyboard {
    background-color: antiquewhite;
}
#resultsList div:first-of-type {
    border: 1px solid black;
}

JavaScript

/*
    This code will determine when a code has been either entered manually or
    entered using a scanner.
    It assumes that a code has finished being entered when one of the following
    events occurs:
        • The enter key (keycode 13) is input
        • The input has a minumum length of text and loses focus
        • Input stops after being entered very fast (assumed to be a scanner)
*/

var inputStart, inputStop, firstKey, lastKey, timing, userFinishedEntering;
var minChars = 3;

// handle a key value being entered by either keyboard or scanner
$("#scanInput").keypress(function (e) {
    // restart the timer
    if (timing) {
        clearTimeout(timing);
    }
    
    // handle the key event
    if (e.which == 13) {
        // Enter key was entered
        
        // don't submit the form
        e.preventDefault();
        
        // has the user finished entering manually?
        if ($("#scanInput").val().length >= minChars){
            userFinishedEntering = true; // incase the user pressed the enter key
            inputComplete();
        }
    }
    else {
        // some other key value was entered
        
        // could be the last character
        inputStop = performance.now();
        lastKey = e.which;
        
        // don't assume it's finished just yet
        userFinishedEntering = false;
        
        // is this the first character?
        if (!inputStart) {
            firstKey = e.which;
            inputStart = inputStop;
            
            // watch for a loss of focus
            $("body").on("blur", "#scanInput", inputBlur);
        }
        
        // start the timer again
        timing = setTimeout(inputTimeoutHandler, 500);
    }
});

// Assume that a loss of focus means the value has finished being entered
function inputBlur(){
    clearTimeout(timing);
    if ($("#scanInput").val().length >= minChars){
        userFinishedEntering = true;
        inputComplete();
    }
};

// Assume that it is from the...