

How to add robust keyboard shortcuts to your site - cirwin
http://blog.bugsnag.com/2013/12/16/robust-keyboard-shortcuts/

======
nfoz
... 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).

~~~
foobar2k
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).

~~~
nfoz
... 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!

------
fjhqjv
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.

~~~
foobar2k
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.

~~~
fjhqjv
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.

