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:
-
-
shortcut("Ctrl+Shift+X", function() {
-
alert("Hi there!");
-
});
-
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.
3.9 rating from 45 votes
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 ;-)
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. :)
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*. :-)
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 :)
pretty userful. I wonder if i can somehow combined it with my ajax libraries and let the users define their hot-keys…
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?
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;
}
}
One of my favorite sites for keyboard shortcuts is keyxl.com. They must have hundreds of programs listed.
http://www.keyxl.com
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