//INPUT: Reading keypresses

<New code>


//INPUT: this reads the number of the key that was pressed
var readKeypress = function (keyEvent) {
    console.log("in readKeypress...");
    var keyNumber   = keyEvent.which || keyEvent.keyCode;   

//INPUT: triggers readKeypress when someone presses a key down
window.onkeydown    = readKeypress;

-OR-, for a functional programming style...

//INPUT: this listens to the keyboard, and returns the number of the key that was pressed
window.onkeydown    = function ( keyEvent ) {
    console.log("in .onkeydown...");
    //decode the number of the key that was pressed
    var keyNumber   = keyEvent.which || keyEvent.keyCode;

    //trigger mainProcedure, sending the key number
    mainProcedure( keyNumber );

-OR-, to turn off the keyboard reader...

//INPUT: turn off the keyboard reader
window.onkeydown = "";

WASD keys make things more fun!

Many of us grew up playing games on computers, using the keyboard to move things around. It is time for us to learn a webpage can read the keyboard

There are a number of different ways to detect the keyboard. Remember how Javascript uses events, such as onclick, onload, and onchange? Well, there are even more options for reading keypresses:

Most Javascript programs use window.onkeydown.

Listening to the window

In Javascript, the window refers to the whole web browser. (In fact, window actually contains all the code, actions, and data of everything that happens in a browser, but more on that later.)

You can't attach onkeydown to just any id. For example: document.getElementById('anyOldID').onkeypress = mainProcedure; will not work. So we have to do something else.

The steps for reading a keystroke are:

var readKeypress = function (keyEvent) {
1. create a function that will be triggered when a key is pressed
note that keyEvent is inside the parentheses.
keyEvent is a variable that stores information about what key has been pressed
var keyNumber = keyEvent.which || keyEvent.keyCode;
2. store the key number inside a variable
This code is ugly because different browsers store the keypress information differently
//do something interesting with the key number
3. often there will be if...else statements here to do different things for different key numbers
window.onkeydown = readKeypress;
4. then make a keypress trigger the function you created

Example code

Press any key to begin!

You pressed character #

...is the result of the following code:

<!doctype html>
<html lang="en">
        <meta charset="UTF-8">
        <title>My first keyboard sniffer</title>
        <meta name="description" content="Display information from keyboard keypresses">
        <meta name="author" content="Dave Drapak">
            Change log:
                5. Oct 2015     - created!
                21. March 2017  - moved script to bottom for better style
                25. March 2018  - changed variable name for clarity

        <h4>Press any key to begin!</h4>
        <p>You pressed character #<span id="keyNumberID"></span></p>

            // first, set up the keypress reading function
            // note that the keyEvent variable is inside the brackets
            var readKeypress = function (keyEvent) {
                console.log('in readKeypress...');
                // the next line handles how different browsers read keypresses
                //INPUT: read the key that was pressed
                var keyNumber   = keyEvent.which || keyEvent.keyCode;   
                //PROCESS: here is where you would do different things depending on keyNumber
                //typically this will be some kind of if ... else if ... else chain
                //OUTPUT: show the character code that was pressed
                document.getElementById('keyNumberID').innerHTML    = keyNumber;
            // Then activate it with window.onkeydown, which is like onclick, 
            // but is activated anytime a key is pressed down while the browser is active
            // ...Notice that there are no brackets () after readKeyPress...
            window.onkeydown    = readKeypress;