How to add robust keyboard shortcuts to your site

http://blog.bugsnag.com/2013/12/16/robust-keyboard-shortcuts/

by cirwin • 13 years ago

14 7 13 years ago

blog.bugsnag.com

nfoz2• 13 years ago

... but please don't, because you probably shouldn't. I wish my user agent wouldn't respect keyboard shortcuts except perhaps a whitelist of sites. Too often they replace actual browser interaction shortcuts, e.g. spacebar to pagedown (google is often guilty of this).

foobar2k2• 13 years ago

This is actually a really good point, I've seen many sites take the approach of adding keyboard shortcuts but avoiding the main "default" actions, (eg. space bar, up, down).

nfoz2• 13 years ago

... and since they can't know what those actions are (since it's up to the user-agent), we're at an awkward nonstandard cat-and-mouse game. Long live ze veb!

fjhqjv2• 13 years ago

I wish the article would go more into keypress events in general and properly organizing code to make attaching shortcuts to it simple, rather than building yet another antipattern into the Jenga tower of bad jQuery code.

The real root of the problem here is systematically tying UI actions to events on specific elements in the DOM. Instead of working around it, why not write slightly cleaner code in the first place?

It's also not strictly necessary to use a third-party library for this unless you're butting heads with one of the edge cases the library is designed to solve.

foobar2k2• 13 years ago

You could trivially restructure the code to factor out global page actions into an object, like this:

    // Make a global page actions object
    PageActions = {
      selectAll: function (event, context) {...},
      nextPage: function (event, context) {...},
      prevPage: function (event, context) {...},
    };

    // Hook up clicks to global actions
    // Eg: <a href="#" data-action="selectAll">All</a>
    $("[data-action]").click(function () {
      var action = $(this).data("action");
      PageActions.selectAll("click", this);
    });

    // Hook up keypresses to global actions
    Mousetrap.bind("a", function () {
      PageActions.selectAll("keypress", this);
    });

This would help with code structure and organization, at the cost of flexibility.

fjhqjv2• 13 years ago

I like to go one step further and simply add a global event delegate to transparently tie DOM elements into a UI controller scoped to a particular portion of the application (to account for sidebars acting differently than the main content). Since 95% of the events handled are click events, it saves a lot of time.

The whole thing ends up being about ten lines of code to implement and handles event binding for practically the entire application. Literally ends up cutting out thousands of lines of boilerplate in larger applications.

I've also found that the actual event object is only useful in a very small amount of cases (drag events and such), to the point where if I ever really need to pass it along, I'll just write a custom event controller for it (using data-handler to specify the custom controller).

When I have too much free time on my hands, I cut out the data attributes entirely and instead route using good old normal hrefs, which as a bonus can render on their own if something goes wrong with the JS.

rileyjshaw• 13 years ago

Came here to say this. The author chooses a poor solution upfront and spends the rest of the article kludgeing around conceptual flaws. I love that keyboard shortcuts are getting some attention though, Gmail and Asana are so much nicer for it.

How to add robust keyboard shortcuts to your site

Related Stories