Listen for keypress on non-form elements.
Here is a simple trick for listening to keypress and related events on elements other than text inputs. As long as you add a tabindex to the element, it can be selected and will accept keyboard events. Here's an example.
<div id='keyboardable' tabindex=1></div> Adding tabindex to the above allows you to focus on the div and start listening for keyboard input. Here is a live example:
You may be wondering, how is this useful? This (http://challenge.crownpartners.com) is a link to a weekend project I worked on a while back to help with some recruiting. When I did this I wasn't aware of this trick so I ended up using a hidden form element, had I known about this I could have used it as a cleaner alternative.
A more common use case is creating a button which you would like the user to be able to trigger via the keyboard.
P.S. Its always a good idea to consider mobile, this trick doesn't seem to work on iOS, haven't tested on Android or other mobile browsers.
