Getting which key was pressed with onkeypress and charCode:

The onkeydown, onkeypress, and onkeyup events detect a key being pressed.
These 3 events execute in the order listed here.

The charCode property allows JavaScript to learn which specific key was pressed in an onkeypress. It does not work with onkeydown or onkeyup.

(However, if the keys you want to detect are "ALT", "CTRL", "META" or "SHIFT", there are customized properties for these keys. See more info on the w3schools' charCode property page.)


Basic Syntax to detect and display a key's charCode:

Add an onkeypress to the body, calling a function and sending the event to the function:

<body onkeypress="keyStuff(event);">

Inside the <script> tags in the head, define the function like so:

function keyStuff(event) {

    var x = event.charCode || event.keyCode;  // Get the Unicode value
    var y = String.fromCharCode(x);  // Convert the value into a character
   
/*  The above 2 lines of code come from:
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_key_charcode4 */

    alert("You pressed " + y + " and its charCode is " + x);
    // display which key was pressed, along with its charCode, in an alert
}
Above, x holds the charCode extracted from the event (the event was the onkeypress sent to the function). The charCode is a Unicode value (number) associated with that specific key.
For example, the Unicode value for a lowercase z is 122.

Here is a working version of the above example - Display which key was pressed, along with its charCode, in an alert

(In the first line within the keyStuff function, || event.keyCode is included for better IE compatibility. Remember that none of the course examples are guaranteed to work with IE.)


Reference for charCodes:

With the working version of the above example, you could type whichever key you like and find out the charCode and make your own notes about what the charCodes are for your desired keys. (This is good for finding out the charCodes for a few keys, but slow if you need to find out about a lot of keys.)

For a more efficient reference, use the table on this w3schools page
Scroll down and look at the first 2 columns of the table, i.e. the Char and Dec columns. The Dec column lists the charCode number you need.

The spacebar charCode is 32

Uppercase and lowercase letters have different charCodes.

Arrow Keys:

On my MacBook Pro laptop keyboard, the arrow keys have the following charCodes:
left arrow - 37
right arrow - 39
up arrow - 38
down arrow - 40

This is a bit strange, because these charCodes also refer to characters like & % ' ( . But it should work as long as you don't combine arrow key detection with detection of characters & % ' ( .
No doubt workarounds exist if this constraint is unacceptable to you, but I will leave it to you to search them out if needed.

Another option if you want to use keys for a movement effect but not use arrow keys, is to use the WASD keys instead (a common usage in computer games):
w for up
s for down
a for left
d for right

Information about current and historical schemes for alternative movement keys is available on the Arrow keys wikipedia page (warning: this is probably a frivolous distraction)


Doing something with keypresses and charCodes:

Assuming you already have this:

<body onkeypress="keyStuff(event);">

Go ahead and edit and expand the keyStuff function, adding an if statement to it that checks which charCode is in x, and does something according to which charCode it is (which key was pressed).


Example with arrow keys and alerts:

Here is an example that checks whether the charCode in x corresponds to the charCode numbers for the four arrow keys, and alerts something different for each arrow key.

function keyStuff(event) {

    var x = event.charCode || event.keyCode;  // Get the Unicode value
    var y = String.fromCharCode(x);  // Convert the value into a character
   
/*  The above 2 lines of code come from:
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_key_charcode4 */

   if (x == 37) {  //if the charCode from the keypress is 37, left arrow
       alert("Remember!");
       
   } else if (x == 39) { //right arrow
       alert("Foretell!");
       
   } else if (x == 38) { //up arrow
       alert("Transcend!");
       
   } else if (x == 40) { //down arrow
       alert("Integrate!");
       
   } else {  //any other keys pressed:
       alert("Do nothing!");
   }

}

Here is a working version of the above example.