Out Now

JQuery Hotkeys and KeyDown Explorer

Capturing keydown events at the document level in JQuery is an effective way of adding shortcut keys to a web-based application.

The code to bind a particular key combination is relatively simple:


$(document).ready(function() {
     $(document).bind('keydown', function (evt){
          event.preventDefault();
          /* Add your code here */
     });        
});

This code works in IE (Edge) and Chrome. Firefox, at the time of writing, does not support the keydown event on the document element.

The purpose of event.preventDefault() is stop default key-bindings from activating. For example, if you want to do something when F1 is pressed, you want to stop the browser from loading up its help page.

Sadly, this is also a little inconsistent between browsers. Chrome lets you block, for example, the default action of F1 whereas IE does not.

Owing to these inconsistencies I wouldn’t recommend using this document-level technique on a web-facing application. For an intranet/internal application where you have better control over what browser may be used then it can be very useful.

Obviously you can trap keydown events in any element you can address with JQuery using the same technique, just swap out document for the JQuery selector of the element you want to work with.

Exploring the JQuery Keydown Event

There’s a working example of the document-level technique in my JQuery Keydown Event Explorer – this app will help you explore what data is available on each keyDown and help you work out how to you identify your particular key-combination.

The app is well tested in Chrome.

Leave a Reply