Create Keyboard Shortcuts for Web Apps with JavaScript | WebReference | WebReference

Create Keyboard Shortcuts for Web Apps with JavaScript | WebReference

By Arpan Dhandhania


[next]

Every time I see someone using the computer the hard and slow way, I have the urge to correct them. For example, when I'm in a meeting and someone is making a presentation using PowerPoint, and to go to the next slide, the presenter right clicks and scrolls to the next slide in the list and clicks on it, I feel like shouting out to them (and sometimes do): "You ****, hit the right arrow on your keyboard!"

I agree that not everyone is as keen to discover everything that all applications have to offer, but one should at least master the applications one uses in their profession, like a writer should know the ins and outs of their word processor. And by master the application, I mean they should be able to use it in a way that saves them the most possible time and effort.

For a long time, Web-based applications were not considered as an option to desktop applications, and one of the primary reasons for that was the lack of keyboard shortcuts in Web apps. Then the likes of Google, Wikipedia and Yahoo introduced keyboard shortcuts in their apps and all of a sudden you found people starting to believe that maybe, just maybe, Web apps might have a real chance again desktop apps.

There are several JavaScript libraries that handle keyboard shortcuts, but after hours of looking around, I came across the one that Binny V A came up with and stopped looking beyond that. The solution he has come up with is simple, clean and does exactly what a shortcut handler should do.

Demo of Keyboard Shortcuts for Web Apps

Before we dive into the specifics of how it works, let us first test it out. Just press the keyboard combinations shown below to see them work:

  • x
    Function called: Not yet.

  • Ctrl+x
    Function called: Not yet.

  • Ctrl+Alt+x
    Function called: Not yet.

  • Shift+A
    Function called: Not yet.

  • Esc
    Function called: Not yet.

Cool, isn't it?


[next]