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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
$(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; } |