Key Press Reaction

When a certain key is pressed on a web page, stuff can happen.

As the website owner, you determine which key that is and you determine what will happen. It's done with the JavaScript accompanying presented in this article.

This web page is an example. When the browser window is in focus and you press the lower-case letter "a" on your keyboard, an alert box pops up with the message:

You pressed the keyboard key "a."

For your implementation, perhaps you want to automatically print the page when the letter "p" is pressed. Or reveal a message when the spacebar is pressed.

Any printable letter and space can be specified to react to. The place to specify the letter is marked in the JavaScript. The letter is case-sensitive.

Also in the JavaScript is a function that can be modified for a custom reaction. Currently, it only has an alert() command. That can be removed and replaced with anything a JavaScript function can do, including calling another function if you already have one built.

Here is the JavaScript. Customize it and put it on your web page. It can go anywhere on the page that JavaScript can run, in the HEAD or BODY area. It can also be imported from an external file.

<script type="text/javascript">
/* 
   Key Press Reaction
   Version 1.0
   January 11, 2011

   Will Bontrager
   https://www.willmaster.com/
   Copyright 2011 Bontrager Connection, LLC

   Bontrager Connection, LLC grants you 
   a royalty free license to use or modify 
   this software provided this notice appears 
   on all copies. This software is provided 
   "AS IS," without a warranty of any kind.
*/
////////////// //////////////
// Two places to customize, a variable and a function.
//

// Place 1.
// Specify the keyboard key to react to. It is case sensitive.
//   Only printable letters or space, no function keys.

var KeyboardKey = "a";


// Place 2.
// In this function, tell the JavaScript what to do when 
//   the keyboard key is pressed.
function WhatToDo() {

alert("You pressed the keyboard key \""+KeyboardKey+".\"");

} // end of function WhatToDo()


////////////// //////////////
// No other customizations required in this JavaScript.
////////////// //////////////////////////// //////////////
var pressed;
var key = KeyboardKey.charCodeAt(0);
function handler(e)
{
   if (document.all)
   {
      var keypressed = window.event;
      pressed = keypressed.keyCode;
   }
   else { pressed = e.charCode; }
   if (pressed == key) { WhatToDo(); }
}

if (!document.all)
{
   window.captureEvents(Event.KEYPRESS);
   window.onkeypress = handler;
}
else { document.onkeypress = handler; }
</script>

When the JavaScript is on the page and the browser window is in focus, pressing the specified letter will initiate the specified reaction.

Will Bontrager