11 April 2012

See jQuery keyboard events for yourself

Unfortunately, no one can be told what Javascript key events are. You have to see them for yourself.

Before you start taking different colored pills, here’s a simple interactive console that prints out debug information as jQuery’s keyboard events are triggered—keydown, keyup, and keypress. There are more details below, but click in and start typing. Also feel free to fiddle around in the JavaScript tab—it’s worth experimenting with evt.preventDefault() and return false on different events:

Columns Legend

  • evt.type — keydown, keyup, or keypress
  • evt.which — jQuery’s normalized value for keyCode & charCode
  • evt.keyCode
  • evt.charCode
  • any special keys that are pressed—evt.altKey, evt.metaKey, or evt.shiftKey

Keypress and key repeats

Keypress is a natural go-to for registering when keys repeat. However, it’s worth testing things in different browsers, e.g., firefox triggers keypress events for arrow keys while webkit does not.

safekeypress.js is a jQuery plugin I wrote to get reliable key repeats at computers natural repeat rate.

Non-repeating keydown

Keydown will repeat for regular keys, which you may not want in some situations. Maybe you want something like a piano to trigger on keydown, but not start repeating, or you want to manually control the rate at which repeats are triggered.

PressedKeys.js is a simple script that lets you just check an object to see if a key is down or not.

Did you find this helpful or fun? paypal.me/mrcoles
comments powered by Disqus

Peter Coles

Peter Coles

is a software engineer living in NYC who is building Superset 💪 and also created GoFullPage 📸
more »

github · soundcloud · @lethys · rss