µDOM/KB Keyboard Events Demo

µDOM/KB offers higher order keyboard event detection for specific keys.

All behaviors are boolean, i.e. their corresponding state is always true (on) or false (off).

Implemented behaviors include:

• push, corresponding to the keyup and keydown DOM events. This state switches to on when the key is pressed and to off when it is released; the only difference to the DOM events is that the callback is called not when any key is pressed or released, but only when the key specified is pressed or released.

• A toggle switches to on when its state is off and the key is pressed; it switches back to off when it is on and the key is pressed and released.

• A latch switches between on and off when the key is pressed twice in rapid succession. It is unaffected by single key presses.

• A tlatch ('toggling latch') is like a latch, but it temporarily switches to the opposite state whenever the key is pressed and back again when the key is released, that is, when the state is latched, the state 'takes a break' (set to off) as long a the key is pressed; conversely, when the state is unlatched and the key is pressed, the state is momentarily set to on.

  Toggling latches therefore allow to implement a CapsLock-like functionality with a single key, say, the Shift key: when it is pressed once and held while pressing another key, that will select the corresponding uppercase letter (or symbol on a numeric key). When it is pressed twice, that shift state is latched, so one can effortlessly write IN SCREAMING CAPS. That state can then temporarily paused by pressing the Shift key to insert digits or lowercase letters; to get back to the 'ground' state, Shift must be tapped twice in succession.

• A ptlatch ('positive toggling latch') is a toggling latch that only switches to the on state; it does not switch temporarily off.

• A ntlatch ('negative toggling latch') is a toggling latch that can only be paused; it does not switch temporarily on.

The callback associated with a given key and behavior will be called when the corresponding state has changed. They will be called with a single argument, a frozen object { keyname, behavior, state, event, }. The state attribute is either true or false; the event attribute contains the most recent event that triggered the event.

Browsers can only detect keyboard events while they are the focused (active) application (otherwise, each website in the world could be a potential key logger). Therefore, when you press keys such as Alt, Shift or CapsLock, there's no way to detect that (and update the below display) based on keyboard events unless this page is in focus. However, mouse events (and the more modern pointer events) are still detected as long as the mouse (pointer) is over the content section of the browser, and it turns out once you receive such a mouse event, you can query it for the modifier key status (and only the modifier keys such as Alt, AltGraph, Shift and so on).

Based on this, µDOM/KB offers Mouse-Based Modifier Change Detection (MBMCD). With MBMCD, you can receive events that detail changes in the current status of modifier keys; these then can be used to generate keydown and keyup events that work exactly as if you had pressed the respective keys with the application in focus.

The MBMCD switch below allows you to select whether to use mouse-based updates to the right-hand part of the table. The leftmost column (with rounded corners) always shows the effects of MBMCD events with a red border where a modifier is pressed, and a grey border when it is released. To observe the effect, focus the window of another application (or the browser's dev tools) and press a modifier key such as Control or Shift. Then, while holding that key, move the mouse pointer back. As soon as the mouse re-enters the content area, the respective cells will be updated as if the key action had just occurred. This feature, therefore, can make key-based state management a bit more reliable.

Latest toggle event: