I recently added a keyboard shortcut to a project I was working on.

And while I have used the jQuery Hotkeys plugin for adding keyboard shortcuts recently, I didn’t use a plugin for this project since I only needed a single keyboard shortcut.

Taking a large bit of inspiration from Krasimir Tsonev, who also documented his solution, I came up with this:

(function( $ ) {
var $doc = $( document );
$doc.ready( function(){
$doc.on( 'keydown', function( e ){
if ( ! $( e.target ).is( ':input' ) ) {

// props rauchg for pointing out e.shiftKey
if ( 87 == e.which && e.shiftKey ) {
// `shift` and `w` are pressed. Do something.
}
}
});
});

})( jQuery );

Explanation

First, I create an anonymous function wrapper and invoke it while passing jQuery as a parameter. This allows me to use the $ syntax for jQuery without worrying about collisions with other libraries.

Then, after the DOM has loaded, I attach a keydown event handler to the document. Before I run any logic though, I check to make sure that we are currently not within any input type. This is important as I don’t want to trigger keyboard shortcuts when a user is typing.

After the code ensures that we are not in an input, I check to see if both the shift key and w have been pressed. If so, do some magic!

Let’s stay in touch!

If you liked what you read, then consider filling out the form below and I'll send you an email any time I post about anything WordPress of Development related. You can even choose which lists you're interested in below!

3 thoughts on “Creating JavaScript Keyboard Shortcuts with jQuery

Leave a Reply

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.