{"id":1521,"date":"2019-04-13T13:20:01","date_gmt":"2019-04-13T05:20:01","guid":{"rendered":"https:\/\/www.techcoil.com\/blog\/?p=1521"},"modified":"2020-05-12T10:36:52","modified_gmt":"2020-05-12T02:36:52","slug":"how-to-detect-keyboard-presses-made-to-the-browser-screen-with-javascript","status":"publish","type":"post","link":"https:\/\/www.techcoil.com\/blog\/how-to-detect-keyboard-presses-made-to-the-browser-screen-with-javascript\/","title":{"rendered":"How to detect keyboard presses made to the browser screen with JavaScript"},"content":{"rendered":"

When you are building a browser-based game, being able to track key presses is helpful. <\/p>\n

For this purpose, you can register a JavaScript function that gets called when the browser detects a key is being pressed.<\/p>\n

After the browser detects a key press, it will send information about the key to your function.<\/p>\n

When your function is able to get the key that is pressed, it can then use this information to update the game state.<\/p>\n

In this post, let's look at how we can detect keyboard presses made to the browser screen with JavaScript.<\/p>\n

Basic JavaScript codes to detect keyboard presses made to entire browser screen<\/h2>\n

First, let us look at the basic JavaScript codes that will detect keyboard presses made to the browser screen:<\/p>\n

\r\ndocument.addEventListener("keydown", onKeyPressed);\r\n\r\nfunction onKeyPressed(e) {\r\n    var keyCode = e.keyCode;\r\n    var key = e.key;\r\n    console.log('Key Code: ' + keyCode + ' Key: ' + key);\r\n}\r\n<\/pre>\n
As shown above, we first use the addEventListener()<\/code> of the document<\/code> object to register the onKeyPressed<\/code> function to the \"keydown\"<\/strong> event. Given that, the onKeyPressed<\/code> 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.<\/p>\n
After the onKeyPressed<\/code> function is called, we assign the key code and key from the Event object to the keyCode<\/code> and key<\/code> variables. Once we have the key code and key, we then used the console.log<\/code> function to print them to the browser console.<\/p>\n
Sample output from running the JavaScript codes<\/h3>\n
When we type the sentence: \"The quick brown fox jumps over the lazy dog.\"<\/strong>, we should get the following output in the browser console:<\/p>\n
\r\nKey Code: 16 Key: Shift\r\nKey Code: 84 Key: T\r\nKey Code: 72 Key: h\r\nKey Code: 69 Key: e\r\nKey Code: 32 Key:  \r\nKey Code: 81 Key: q\r\nKey Code: 85 Key: u\r\nKey Code: 73 Key: i\r\nKey Code: 67 Key: c\r\nKey Code: 75 Key: k\r\nKey Code: 32 Key:  \r\nKey Code: 66 Key: b\r\nKey Code: 82 Key: r\r\nKey Code: 79 Key: o\r\nKey Code: 87 Key: w\r\nKey Code: 78 Key: n\r\nKey Code: 32 Key:  \r\nKey Code: 70 Key: f\r\nKey Code: 79 Key: o\r\nKey Code: 88 Key: x\r\nKey Code: 32 Key:  \r\nKey Code: 74 Key: j\r\nKey Code: 85 Key: u\r\nKey Code: 77 Key: m\r\nKey Code: 80 Key: p\r\nKey Code: 83 Key: s\r\nKey Code: 32 Key:  \r\nKey Code: 79 Key: o\r\nKey Code: 86 Key: v\r\nKey Code: 69 Key: e\r\nKey Code: 82 Key: r\r\nKey Code: 32 Key:  \r\nKey Code: 84 Key: t\r\nKey Code: 72 Key: h\r\nKey Code: 69 Key: e\r\nKey Code: 32 Key:  \r\nKey Code: 76 Key: l\r\nKey Code: 65 Key: a\r\nKey Code: 90 Key: z\r\nKey Code: 89 Key: y\r\nKey Code: 32 Key:  \r\nKey Code: 68 Key: d\r\nKey Code: 79 Key: o\r\nKey Code: 71 Key: g\r\nKey Code: 190 Key: .\r\n<\/pre>\n
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.<\/p>\n
Getting the barcode from a barcode scanner with JavaScript<\/h2>\n
Since most barcode scanners<\/a> act like a keyboard, it is possible to get barcode with JavaScript.<\/p>\n
When I ran the earlier JavaScript codes with my browser and scanned a barcode with my barcode scanner, I realised that:<\/p>\n