Read my book

I wrote books about Webpack and React. Check them out!

Friday, December 10, 2010

Less Spartan Approach to JavaScript Key Handling

Let's face it. It's not fun to deal with keys in JavaScript. Each browser seems to have an idea of its own how it should work. In this post I'm going to show the way I deal with this madness.

I have split my solution in two parts: shortcuts and mixed events (ie. trigger some handler while both mouse button and some key is pressed). I will use a premade component for the former while I present a custom solution of my own for the latter. My solution is based on RightJS but it ought to be easy to translate the idea to other environments as well.
Keyboard shortcuts are like a second nature to us hackery types. An application without them just feels plain weird. How are you supposed to use it efficiently then? :)

I can see this doesn't quite apply to all environments (touch based UIs come to mind) but you get the point. Given they are pretty widely used it often makes sense to provide them in your application.

Fortunately dealing with them is quite easy in JavaScript. There's a nice pre-made library that does the heavy lifting for you. All you need to do is to hook it up as follows:

Note that you could define hotkeys and handlers related to them elsewhere and then just run them through "shortcut". The basic idea applies, though.

Note the "disable_in_input" option. I highly recommend setting it on in case your application happens to have some sort of input fields in it.

Mixed Events

The above solution won't cover cases in which we need to check some keys while the user does something else (ie. is pressing a mouse button). To deal with this I use a simple keyboard abstraction layer like this:

All the layer does is just to keep track of keys that are being pressed at a given time. It provides simple means (keyboard.isPressed) to check this of course.

Now that you have this information all you have to do is just check while doing the master op (ie. move mouse). Here's a small example of how you might use it:


The main point of this post was just to share some approaches I use in my JavaScript development. You probably have to adapt them to fit your case. I have found them adequate for my purposes, though.