This script has been updated. For the latest info please see this new page.


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.

Join the Conversation

13 Comments

  1. I’m going to be closing the comments on this post for a while today due to the amount of spam comments it’s getting around 2 a minute. if you like support please contact me via the contact page.

    1. I’ve turned comments back on and hopefully the number of spam comments hitting this post will of dropped

  2. I tried adding the two windows keys and the select key, but it seems like even though I have the correct codes for them in the logic, the OS doesn’t allow any use of them? I was able to capture their correct key codes through example key capture scripts but nothing else. Have you any experience with this issue?

    1. The are a few issues when using global shortcuts when the system either doesn’t pass the commands or the script does process these.

  3. i bind keydown event on document, if it focus on iframe now, how to trigger the keydown event

    1. If you want to add keyboard shortcuts to the page within the iframe you will have to add them on the page loaded inside the frame.

  4. I put code above, but it does’nt work.. what is the problem?

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

    1. This code should work, can you send me a URL where this is used or a gist with your code and I’ll have a look.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.