Thursday, April 19th, 2007

Handling Keyboard Shortcuts in JavaScript

Category: JavaScript, Library

Handling Keyboard Shortcuts in JavaScript is a simple script that allows you to declare shortcut event handling in your applications.

javascript

  1. shortcut("Ctrl+Shift+X", function() {
  2.     alert("Hi there!");
  3. });

You can also pass in options:

  • type: The event type – can be ‘keydown’,’keyup’,’keypress’. Default: ‘keydown’
  • target: The element that should be watched for the keyboard event. Default : document
  • propagate: Allow the event to propagate? Default : false

Very cheap and cheerful.

Download shortcuts.js to check it out.

Posted by Dion Almaer at 12:08 am
9 Comments

+++--
3.8 rating from 59 votes

9 Comments »

Comments feed TrackBack URI

I wonder..

shortcut(“Alt+F4”, function() {
return false;
});

To stop people from instantly closing my popups.. don’t worry, they’re actually informative popups in a custom built intranet. I guess it won’t work ;-)

Comment by Marcel — April 19, 2007

I’m already using this in some projects.

Seems to work quite well… but obviously some key combos are a no-go in different browsers. :)

Comment by Tim Leonard — April 19, 2007

Looks great, but will be dependent on the user’s environment, running applications and previously defined hotkeys. On my system, one of his demo shortcuts (Shift+F1) displays the Google Desktop browser and doesn’t activate the intended action.

Still a great library if you can live with the potential for variation among user systems. Hopefully keyboard shortcuts are merely a navigational *aid*. :-)

Comment by Rob Wilkerson — April 19, 2007

I’ve made a port to a jQuery plugin of this. I haven’t added it to SVN yet, but i tested it against “ctrl+s” in firefox. The event didn’t trigger the “Save as” function :)

Comment by Gilles — April 19, 2007

pretty userful. I wonder if i can somehow combined it with my ajax libraries and let the users define their hot-keys…

Comment by Liming Xu — April 19, 2007

It’s a great library! But how do you remove the shortcut if you want to replace it with another or simply release the shortcut?

Comment by Peter — April 19, 2007

If using Dojo, you can do something similar:


getKeyName: function(event) {
var keyName = dojo.event.browser.revKeys[event.keyCode];
if (keyName) {
keyName = keyName.substring(4); // Drop KEY_ prefix
}
if (keyName && keyName != 'SHIFT' && keyName != 'ALT' && keyName != 'CTRL') {
if (event.shiftKey) {
keyName = 'SHIFT_' + keyName;
}
if (event.altKey) {
keyName = 'ALT_' + keyName;
}
if (event.ctrlKey) {
keyName = 'CTRL_' + keyName;
}
}
return keyName;
},

onKeyDown: function(event) {
var keyFn = this.keyActions[this.getKeyName(event)];
if (keyFn) {
if (!keyFn.call(this, event)) {
event.preventDefault();
}
}
},

keyActions: {
UP_ARROW: function() {
this.selectMoveBy(-1,0);
},
DOWN_ARROW: function() {
this.selectMoveBy(1,0);
},
LEFT_ARROW: function() {
this.selectMoveBy(0,-1);
},
RIGHT_ARROW: function() {
this.selectMoveBy(0,1);
},
SHIFT_UP_ARROW: function() {
this.selectMoreBlock(-1,0);
},
SHIFT_DOWN_ARROW: function() {
this.selectMoreBlock(1,0);
},
SHIFT_LEFT_ARROW: function() {
this.selectMoreBlock(0,-1);
},
SHIFT_RIGHT_ARROW: function() {
this.selectMoreBlock(0,1);
},
CTRL_HOME: function() {
this.goHome();
},
CTRL_END: function() {
this.goEnd();
},
HOME: function() {
this.selectMoveBy(0,-10000);
},
END: function() {
this.selectMoveBy(0,10000);
},
PAGE_UP: function() {
this.movePage(-1);
},
PAGE_DOWN: function() {
this.movePage(1);
},
ESCAPE: function() {
if (this.columnResizing) {
this.stopColumnResizing(-1);
} else {
return true;
}
},
TAB: function() {
return true;
},
CTRL_TAB: function() {
return true;
},
SHIFT_TAB: function() {
return true;
}
}

Comment by Morris — April 24, 2007

One of my favorite sites for keyboard shortcuts is keyxl.com. They must have hundreds of programs listed.

http://www.keyxl.com

Comment by jab — August 27, 2007

I am trying to figure all out and it seems like a very powerful thing. I was struggling with shortcuts for some time now, but this one made my life easier…
just my 2c

Comment by Fallen — December 12, 2007

Leave a comment

You must be logged in to post a comment.