Click here to Skip to main content
13,044,935 members (45,855 online)
Click here to Skip to main content
Add your own
alternative version


13 bookmarked
Posted 21 May 2010

JavaScript and Shortcut Keys

, 21 May 2010
Rate this:
Please Sign up or sign in to vote.
A framework for capturing specific key combinations.


This article will explain my framework for capturing key presses.


I've recently had to develop a WYSIWYG editor in HTML and JavaScript. There were several actions which work a lot better and are more efficient when accessed on shortcut keys than through the editor's UI. I wanted a generic way of handling this, and therefore developed the following code.


This framework builds upon other frameworks I have developed. The page that implements the code in this article must also implement the following frameworks:

Using the code

Most of my frameworks require document events to be configured a certain way. The key framework is no different. This framework ties into to the onkeydown and onkeyup events of the body. The events need to be configured as such:

<script language="javascript" type="text/javascript">

var OnBaseKeyDown = new uiEvent();
var OnBaseKeyUp = new uiEvent();

<body onkeydown="OnBaseKeyDown.Fire(e?e:null);" onkeyup="OnBaseKeyUp.Fire(e?e:null);">

There are other events that get configured this way in the complete framework, but these will be covered in the articles they are relevant to.

The following is the JavaScript for the key framework. This needs to be added after the definition of the OnBaseKeyDown and OnBaseKeyUp events.

var KeyState = {
  Ctrl: false,
  Shift: false

var KeyEventManager = {
  EventMappings: new Array(),
  Add: function(mapping) { this.EventMappings.Add(mapping); },
  KeyUpHandler: function(e) {
    var key = e ? e.which : event.keyCode;
    if (key == 17)
      KeyState.Ctrl = false;
    if (key == 16)
      KeyState.Shift = false;
    var sKey = String.fromCharCode(key); 
    for(var x = 0; x < KeyEventManager.EventMappings.length; x++) {
      var em = KeyEventManager.EventMappings[x];
      if(KeyState.Shift == em.Shift && KeyState.Ctrl == 
            em.Ctrl && sKey.toLowerCase() == em.Key.toLowerCase())
  KeyDownHandler: function(e) {
    var key = e ? e.which : event.keyCode;
    if (key == 17)
      KeyState.Ctrl = true;
    if (key == 16)
      KeyState.Shift = true;

var KeyEventMapping = function(shift, ctrl, key) {
  this.Shift = shift;
  this.Ctrl = ctrl;
  this.Key = key;
  this.OnPress = new uiEvent();


In this framework, there is an object called KeyState. It contains two properties: Ctrl and Shift, that can be used at any time to check the pressed state of the Ctrl and Shift buttons.

The second object is the KeyEventManager. This ties into the key up and key down events of the page; it manages the Ctrl and Shift states and raises events for any registered key mappings.

There is also a class called KeyEventMapping. This contains an event called OnPress. This is the event for which you register your code for execution.

The following example shows how the shortcut key framework can be implemented:

var kem = new KeyEventMapping(false, true, 'g');
kem.OnPress.Register(function() { alert('test'); });


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Stephen Hewison
United Kingdom United Kingdom
No Biography provided

You may also be interested in...

Comments and Discussions

QuestionMissing code? Pin
Bjoern4217-Nov-10 23:20
memberBjoern4217-Nov-10 23:20 
AnswerRe: Missing code? Pin
Stephen Hewison 221-Sep-11 23:58
memberStephen Hewison 221-Sep-11 23:58 
GeneralRe: Missing code? Pin
Bjoern4222-Sep-11 0:33
memberBjoern4222-Sep-11 0:33 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170713.1 | Last Updated 21 May 2010
Article Copyright 2010 by Stephen Hewison
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid