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? Please donate!

donate via btc or eth

btc: 18jCzwsZDGQYcs6Kyv92pd4683cnnxm1Dd
eth: 0xC285F21Cb271Cb4B3F70c4C47B2f7B26063AF590
paypal: 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