Shortcut.js Add keyboard shortcuts to your site

Shortcut.js Add keyboard shortcuts to your site

shortcut.js is a JavaScript file that enables keyboard shortcuts in any web application. I wrote the script to add keyboard shortcuts to a very early stage project I'm working on which I'm not ready to disclose at the moment.

How to Use

Once you’ve downloaded and extracted shortcut.zip (download) you can follow the guide below.

The zip archive includes both a standard JavaScript file (shortcut.js) and a PHP file (shortcut.js.php) that will enable GZip. Only use the PHP file if your server supports GZip, it does not check.

Install/Setup

To use the script simply link to the file in the head section of the page you want shortcuts on with

<script src="shortcut.js" type="text/javascript"></script>

If you use shortcut.js.php (included in the shortcut.zip download), with GZip compression enabled you will need to edit the link above accordingly.

Add Shortcuts

Then add the following code for each shortcut in between <script> </script> tags:

shortcut.add("Ctrl+B",function() { alert("The bookmarks of your browser will show up after this alert..."); },{ 'type':'keypress', 'propagate':true, 'target':document });

Replace "Ctrl+B with the keys you want the shortcut to be assigned to.

Where “alert(…” appears is the JavaScript to run on key press you should replace this with your code, you can call functions in this area.

Valid Keys

Modifier

The valid modifiers are

  • Ctrl
  • Alt
  • Shift
  • Meta

Other keys

All alpha/numeric keys are supported as are most special characters on the standard keyboard.

Special Keys

The following special keys are also supported:

  • Tab
  • Space
  • Return
  • Enter
  • Backspace
  • Scroll_lock
  • Caps_lock
  • Num_lock
  • Pause
  • Insert
  • Home
  • Delete
  • End
  • Page_up
  • Page_down
  • Left
  • Up
  • Right
  • Down
  • F1
  • F2
  • F3
  • F4
  • F5
  • F6
  • F7
  • F8
  • F9
  • F10
  • F11
  • F12

(these are not case sensitive)

Advance Use

This is more of an explanation of what things do.

In this example pressing Ctrl+B will display a message and then allow the browser to run any shortcuts it has on them keys

shortcut.add("Ctrl+B",function() { alert("The bookmarks of your browser will show up after this alert..."); },{ 'type':'keypress', 'propagate':true, 'target':document });

type: when to run the shortcut, keypress/keydown/keyup etc.
propagate: set to true will run the sites script and then pass the key combo to the browser to run anything it might have set up to do.
target: where the action will take place, same as target in links.

Updates

Not that I'm planing major updates to this script but if somethings breaks or I find a better way to do something check this page for updates.