//INPUT: Reading keypresses

<New code>

//INPUT JS:

var readKeypress = function (keyEvent) {
    var characterPressed    = keyEvent.which || keyEvent.keyCode;   
}

window.onkeydown    = readKeypress;

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 characterPressed = 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">
    <head>
        <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
        -->
    </head>

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

        <script>
            // 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 characterPressed    = keyEvent.which || keyEvent.keyCode;   
                
                //PROCESS: here is where you would do different things depending on characterPressed
                //typically this will be some kind of if ... else if ... else chain
                
                //OUTPUT: show the character code that was pressed
                document.getElementById('codeID').innerHTML = characterPressed;
            }
            
            // 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;
        </script>
    </body>
</html>