JavaScript - Shortcut Keys

From NoskeWiki
Jump to navigation Jump to search

About

NOTE: This page is a daughter page of: JavaScript


For certain interfaces you might want to insert shortcut keys (eg: ctrl+s | arrow keys) to a webpage. Below are some examples of setting up shortcut keys.


Setting up KeyPress Events using the DOM

The following code should work nicely on for most browsers:

document.onkeypress = function(e) {

  if (!e) e = window.e;
  var code = (e.charCode && e.keyCode == 0) ? e.charCode : e.keyCode;
  var charVal = String.fromCharCode(code);
  
  alert('code=' + code + ' charVal=' + charVal);  // To help you work out what key was pressed.

  switch (charVal) {
    case ('1'):                               // [1] or [,] for first option.
    case (','):
      alert('Option 1 pressed');
      break;
    case ('p'):                               // [p] for a different option.
      alert('Option P pressed');
      break;
  }
};

Note that "onkeypress" is a better option then "onkeydown" as the latter often has weird syntax for


Setting up KeyPress Events using Closure

For more versatility you can use Google's closure library which includes a goog.ui.KeyboardShortcutHandler used in their demo as follows:

goog.require('goog.dom');
goog.require('goog.events.KeyCodes');
goog.require('goog.ui.KeyboardShortcutHandler');


function showTriggered(event) {
  alert('Shortcut triggered: ' + event.identifier);
}

var shortcutHandler = new goog.ui.KeyboardShortcutHandler(document);

var NONE = goog.ui.KeyboardShortcutHandler.Modifiers.NONE;
var CTRL = goog.ui.KeyboardShortcutHandler.Modifiers.CTRL;
var SHIFT = goog.ui.KeyboardShortcutHandler.Modifiers.SHIFT;
var ALT = goog.ui.KeyboardShortcutHandler.Modifiers.ALT;
var META = goog.ui.KeyboardShortcutHandler.Modifiers.META;

shortcutHandler.registerShortcut('A', 'a');
shortcutHandler.registerShortcut('T E S T', 't e s t');
shortcutHandler.registerShortcut('SHIFT_F12', 'shift+f12');
shortcutHandler.registerShortcut('CTRL_A', goog.events.KeyCodes.A, CTRL);
shortcutHandler.registerShortcut('ENTER', goog.events.KeyCodes.ENTER);

goog.events.listen(
    shortcutHandler,
    goog.ui.KeyboardShortcutHandler.EventType.SHORTCUT_TRIGGERED,
    showTriggered);

NOTE: The html file itself must look like this:

<head>
  <script src="../base.js"></script>
  <script src="../LINK_TO_YOUR_JS_FILE_HERE.js"></script>
</head>
<body>
  Press a shortcut key ('a', 'goog' or a few others).
</body>

Links