Recently, I recommended shortcut keys for a web application and somebody in the room asked if that was even possible. I replied “of course” and cited a couple examples. Gmail immediately came to mind since it was one of the first web apps I encountered with shortcuts. While shortcuts like CTRL+S or ⌘+P are common in desktop apps, they are less so in web apps. However, they can be a huge time saver for repetitive functions and have there place in sovereign applications.

Since that conversation, I have been thinking about how this actually gets done. I knew that HTML has an accesskey attribute and wondered if it was as easy as adding some of these attributes where needed. While this works as advertised, it requires two control keys in many browsers (e.g. CTRL+OPTION), which might not be desirable.

Another method uses javascript to watch for key combinations. keymaster.js seems to do this quite well. There’s also a jquery hotkeys plugin that does the same thing. With these, one can create easier shortcut key combinations, and even override shortcuts defined by the OS and/or browser. Although, one should think twice before overriding OS/browser functionality.

The Codepen for my little experiment appears below…

See the Pen OPxdYK by JP Reardon (@jpreardon) on CodePen.

Leave a Reply