How to detect keyboard presses made to the browser screen with JavaScript

When you are building a browser-based game, being able to track key presses is helpful.

For this purpose, you can register a JavaScript function that gets called when the browser detects a key is being pressed.

After the browser detects a key press, it will send information about the key to your function.

When your function is able to get the key that is pressed, it can then use this information to update the game state.

In this post, let's look at how we can detect keyboard presses made to the browser screen with JavaScript.

Basic JavaScript codes to detect keyboard presses made to entire browser screen

First, let us look at the basic JavaScript codes that will detect keyboard presses made to the browser screen:

document.addEventListener("keydown", onKeyPressed);

function onKeyPressed(e) {
    var keyCode = e.keyCode;
    var key = e.key;
    console.log('Key Code: ' + keyCode + ' Key: ' + key);
}

As shown above, we first use the addEventListener() of the document object to register the onKeyPressed function to the "keydown" event. Given that, the onKeyPressed function will be called every time the user presses a key when the browser is active. In addition to that, the browser will provide an Event Object that provides information about the key that was pressed.

After the onKeyPressed function is called, we assign the key code and key from the Event object to the keyCode and key variables. Once we have the key code and key, we then used the console.log function to print them to the browser console.

Sample output from running the JavaScript codes

When we type the sentence: "The quick brown fox jumps over the lazy dog.", we should get the following output in the browser console:

Key Code: 16 Key: Shift
Key Code: 84 Key: T
Key Code: 72 Key: h
Key Code: 69 Key: e
Key Code: 32 Key:  
Key Code: 81 Key: q
Key Code: 85 Key: u
Key Code: 73 Key: i
Key Code: 67 Key: c
Key Code: 75 Key: k
Key Code: 32 Key:  
Key Code: 66 Key: b
Key Code: 82 Key: r
Key Code: 79 Key: o
Key Code: 87 Key: w
Key Code: 78 Key: n
Key Code: 32 Key:  
Key Code: 70 Key: f
Key Code: 79 Key: o
Key Code: 88 Key: x
Key Code: 32 Key:  
Key Code: 74 Key: j
Key Code: 85 Key: u
Key Code: 77 Key: m
Key Code: 80 Key: p
Key Code: 83 Key: s
Key Code: 32 Key:  
Key Code: 79 Key: o
Key Code: 86 Key: v
Key Code: 69 Key: e
Key Code: 82 Key: r
Key Code: 32 Key:  
Key Code: 84 Key: t
Key Code: 72 Key: h
Key Code: 69 Key: e
Key Code: 32 Key:  
Key Code: 76 Key: l
Key Code: 65 Key: a
Key Code: 90 Key: z
Key Code: 89 Key: y
Key Code: 32 Key:  
Key Code: 68 Key: d
Key Code: 79 Key: o
Key Code: 71 Key: g
Key Code: 190 Key: .

As shown above, the key code is an integer while the key is either a character or word depending on the key that is pressed.

Getting the barcode from a barcode scanner with JavaScript

Since most barcode scanners act like a keyboard, it is possible to get barcode with JavaScript.

When I ran the earlier JavaScript codes with my browser and scanned a barcode with my barcode scanner, I realised that:

• A capital letter results in two key presses. For example if there is an A in the barcode, key presses are made to Shift and A.
• At the end of the barcode, there is a newline character.

Given these points, we can get the barcode from a barcode scanner with JavaScript codes similar to the following:

document.addEventListener("keydown", onKeyPressed, false);

var barcode = '';

function onKeyPressed(e) {
  var keyCode = e.keyCode;
  if(keyCode == 13) {
    alert(barcode);
    barcode='';
  } else {
    if (keyCode != 16) {
      barcode = barcode + e.key;
    }
  }
}

In addition to the basic JavaScript codes discussed earlier, we now add a barcode variable outside of the onKeyPressed function.

When we detect a newline character (key code: 13), we use the alert function to show the barcode. After the alert, we reset the barcode to an empty string.

When a key is not a newline character and not a Shift (key code: 16), we add the key to the barcode variable.

Given these points, we will be able to get a barcode from the barcode scanner in JavaScript. When we want to verify the barcode, we can then replace the alert function with an Ajax call to a server endpoint.

• Share
• Tweet
• Share
• Save