Typed by a human or scanned with barcode reader?

Simple check to determine the speed of user input into a form element. This was to prevent users from typing in barcodes that were required to be entered using a barcode scanner.

HTML:

<!DOCTYPE html>
<html>

<head lang="en">
    <link type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="check-input-speed.js"></script>
    <meta charset="UTF-8">
    <title>Monitor Form Input Speed</title>
</head>

<body>
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8">
            <h2>Human or Barcode Scanner?</h2>
            <form>
                <input type="text" id="input_to_check" class="form-control" />
                <div class="row">
                    <div class="col-md-12">
                        <span id="CPM">0</span>
                    </div>
                </div>
            </form>
            <div id="analysis">
                <div class="alert alert-danger" id="human">
                    HUMAN!
                </div>
                <div class="alert alert-success" id="barcode_scanner">
                    BARCODE SCANNER!
                </div>
            </div>
        </div>
    </div>
</body>

</html>

 

JavaScript:

$(function() {
  $("#human,#barcode_scanner").hide();
  $("#input_to_check")
    .keyup(checkSpeed)
    .focus();
});

var iLastTime = 0;
var iTime = 0;
var iTotal = 0;
var iKeys = 0;

function checkSpeed() {
  iTime = new Date().getTime();
  var cpm,
    wpm = 0;
  if (iLastTime != 0) {
    iKeys++;
    iTotal += iTime - iLastTime;

    cpm = Math.round(iKeys / iTotal * 6000, 2);
    $("#CPM").html("Characters per min: " + cpm);

    if (cpm < 300) {
      $("#human").show();
      $("#barcode_scanner").hide();
    } else {
      $("#human").hide();
      $("#barcode_scanner").show();
    }
  }

  iLastTime = iTime;
}