Document Keybindings
HTML
<div class="clickme key-ctrl-s">Click Ctrl-s</div>
<div class="key-shift-V clickme">Click Shift-v</div>
<div class="clickme key-alt-m otherlass">Click Alt-M</div>
<div class="clickme key-ctrl-shift-d">Click Ctrl-Shift-d</div>
<div class="clickme key-enter">Enter</div>
<div id="output"></div>
CSS
#output {
color:green;
}
#output:hover {
cursor:pointer;
}
JavaScript
$('.clickme').click(function (evt) {
$('#output').html('You clicked on: ' + $(this).html());
});
var keybindings = [];
$('[class*="key-"]').each(function (idx, val) {
var keyspec = {
which: 0,
altKey: false,
shiftKey: false,
ctrlKey: false,
element: val
};
var keystring = $(val).attr('class').toLowerCase();
var match = /key-\S+/.exec(keystring);
var parts = match.toString().split('-');
keyspec.which = parts[ parts.length-1 ].toUpperCase().charCodeAt(0);
for (var jdx in parts) {
if (parts[jdx] == 'alt') keyspec.altKey = true;
else if (parts[jdx] == 'shift') keyspec.shiftKey = true;
else if (parts[jdx] == 'ctrl') keyspec.ctrlKey = true;
}
keybindings.push( keyspec );
});
$(document).keydown( function(evt) {
$.each(keybindings, function(idx, oneBind) {
if (evt.which == oneBind.which
&& evt.altKey == oneBind.altKey
&& evt.shiftKey == oneBind.shiftKey
&& evt.ctrlKey == oneBind.ctrlKey)
$(oneBind.element).click();
});
});